LETS GOOOOOOOOOOOOOOOOOOOOOOOOO

backend/app/services/billing.py

@@ -56,14 +56,15 @@ def build_nudges(db: Session, workspace: Workspace, plan: Plan, meters: list[dic
             if m["limit"] < 0 or m["key"] == "sources":
                 continue
             label = m["label"].lower()
+            amount = f"{m['limit']:g} min of {label}" if m["unit"] else f"{m['limit']:g} {label}"
             if m["pct"] >= 1:
                 out.append(_nudge(f"empty-{m['key']}-{month}", "limit", f"Out of {label} this month",
-                                  f"You have used all {m['limit']} {m['unit'] or label}. Upgrade to keep launching.",
-                                  "Refuel now", priority=100))
+                                  f"You have used all {amount}. Upgrade to keep launching.", "Refuel now",
+                                  priority=100))
             elif m["pct"] >= LOW_FUEL:
-                left = round(m["limit"] - m["used"], 1)
+                left = f"{m['limit'] - m['used']:g}" + (" min" if m["unit"] else "")
                 out.append(_nudge(f"low-{m['key']}-{month}", "limit", f"Running low on {label}",
-                                  f"Only {left:g} {m['unit'] or 'left'} left this month. Upgrade before you stall mid launch.",
+                                  f"Only {left} left this month. Upgrade before you stall mid launch.",
                                   "See plans", priority=90))
         if not plan.voice_cloning:
             out.append(_nudge("perk-voice", "upgrade", "Narrate in your own voice",
@@ -71,7 +72,8 @@ def build_nudges(db: Session, workspace: Workspace, plan: Plan, meters: list[dic
                               "Unlock voice", priority=40))
         if not plan.brand_kit:
             out.append(_nudge("perk-brand", "upgrade", "Put your brand on every render",
-                              "Your colors and logo on videos, quote cards and carousels.", "Unlock brand kit", priority=30))
+                              "Your colors and logo on videos, quote cards and carousels.", "Unlock brand kit",
+                              priority=30))
 
     sources = _count(db, Source, ws)
     if sources == 0:

backend/app/services/plans.py

@@ -146,7 +146,7 @@ def upgrade_for(plan: Plan, kind: str | None = None) -> str | None:
         if kind == "voice_cloning" and candidate.voice_cloning:
             return pid
         current, better = getattr(plan, kind, 0), getattr(candidate, kind, 0)
-        if better < 0 or (isinstance(better, (int, float)) and better > current):
+        if better < 0 or (isinstance(better, int | float) and better > current):
             return pid
     return None
 

frontend/src/api/client.ts

@@ -5,13 +5,20 @@ const REFRESH = "ns_refresh";
 export class ApiError extends Error {
   status: number;
   code?: string;
-  constructor(status: number, message: string, code?: string) {
+  detail?: Record<string, unknown>;
+  constructor(status: number, message: string, code?: string, detail?: Record<string, unknown>) {
     super(message);
     this.status = status;
     this.code = code;
+    this.detail = detail;
   }
 }
 
+/** Fired on every 402 plan_limit so the upgrade popup opens wherever the request came from. */
+export const PLAN_LIMIT_EVENT = "ns:plan-limit";
+
+export type PlanLimitDetail = { message: string; kind?: string; plan?: string; upgrade_to?: string | null };
+
 function read(key: string): string | null {
   try {
     return localStorage.getItem(key);
@@ -48,6 +55,7 @@ export const tokens = {
 async function parseError(res: Response): Promise<ApiError> {
   let message = res.statusText || "Something went wrong";
   let code: string | undefined;
+  let extra: Record<string, unknown> | undefined;
   try {
     const body = await res.json();
     const detail = body.detail;
@@ -55,11 +63,15 @@ async function parseError(res: Response): Promise<ApiError> {
     else if (detail?.message) {
       message = detail.message;
       code = detail.code;
+      extra = detail;
     }
   } catch {
     /* non JSON */
   }
-  return new ApiError(res.status, message, code);
+  if (res.status === 402 && code === "plan_limit") {
+    window.dispatchEvent(new CustomEvent<PlanLimitDetail>(PLAN_LIMIT_EVENT, { detail: { ...extra, message } }));
+  }
+  return new ApiError(res.status, message, code, extra);
 }
 
 async function tryRefresh(): Promise<boolean> {

frontend/src/api/endpoints.ts

@@ -2,6 +2,7 @@ import { api, del, patch, post, put, qs, uploadFile } from "./client";
 import type {
   Artifact,
   ArtifactType,
+  BillingStatus,
   CalendarItem,
   ChatMessage,
   ChatSummary,
@@ -179,3 +180,11 @@ export const settingsApi = {
   update: (body: SettingsPatch) => patch<Settings>("/api/settings", body),
   usage: () => api<Usage>("/api/settings/usage"),
 };
+
+export type BillingCycle = "monthly" | "annual";
+
+export const billingApi = {
+  status: () => api<BillingStatus>("/api/billing/status"),
+  checkout: (plan: string, cycle: BillingCycle) => post<{ url: string }>("/api/billing/checkout", { plan, cycle }),
+  portal: () => post<{ url: string }>("/api/billing/portal"),
+};

frontend/src/api/types.ts

@@ -310,3 +310,38 @@ export type Settings = {
   usage: Usage;
   integrations: { llm: boolean; elevenlabs: boolean; x: boolean; linkedin: boolean; storage: string; renderer: string };
 };
+
+export type PlanInfo = Plan & {
+  tagline: string;
+  price_monthly_usd: number;
+  price_annual_monthly_usd: number;
+  price_annual_usd: number;
+  annual_savings_pct: number;
+  features: string[];
+};
+
+export type Meter = { key: string; label: string; unit: string; used: number; limit: number; pct: number };
+
+/** tone: limit (low or out of fuel), upgrade (locked perk), action (use what you have). No `to` opens the upgrade popup. */
+export type Nudge = {
+  id: string;
+  tone: "limit" | "upgrade" | "action";
+  title: string;
+  body: string;
+  cta: string;
+  to: string | null;
+  priority: number;
+};
+
+export type BillingStatus = {
+  billing_enabled: boolean;
+  plan: PlanInfo;
+  plans: PlanInfo[];
+  next_plan: string | null;
+  can_upgrade: boolean;
+  has_billing_account: boolean;
+  period_end: string | null;
+  meters: Meter[];
+  since: string;
+  nudges: Nudge[];
+};

frontend/src/components/AppShell.tsx

@@ -1,8 +1,11 @@
 import { useState } from "react";
 import { NavLink, Outlet, Navigate, useLocation } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
+import { UpgradeProvider } from "../hooks/useUpgrade";
 import Logo from "./Logo";
+import { FuelGauge, NudgeDock } from "./Nudges";
 import SkyCanvas from "./SkyCanvas";
+import UpgradeModal from "./UpgradeModal";
 import {
   AsteroidIcon,
   CometIcon,
@@ -62,52 +65,58 @@ export default function AppShell() {
   }
 
   return (
-    <div className={`shell${collapsed ? " collapsed" : ""}`}>
-      <SkyCanvas intensity={0.35} />
-      <aside className="sidebar">
-        <div className="sidebar-top">
-          {collapsed ? (
-            <button type="button" className="sidebar-brand sidebar-brand-btn" onClick={toggle} aria-label="Expand sidebar" title="Expand sidebar">
-              <Logo size={28} />
+    <UpgradeProvider>
+      <div className={`shell${collapsed ? " collapsed" : ""}`}>
+        <SkyCanvas intensity={0.35} />
+        <aside className="sidebar">
+          <div className="sidebar-top">
+            {collapsed ? (
+              <button type="button" className="sidebar-brand sidebar-brand-btn" onClick={toggle} aria-label="Expand sidebar" title="Expand sidebar">
+                <Logo size={28} />
+              </button>
+            ) : (
+              <NavLink to="/" className="sidebar-brand">
+                <Logo size={28} />
+              </NavLink>
+            )}
+            <button
+              type="button"
+              className="icon-btn sidebar-toggle"
+              onClick={toggle}
+              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-expanded={!collapsed}
+              title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <rect x="3.5" y="4.5" width="17" height="15" rx="2.5" />
+                <path d="M9 4.5v15" />
+                <path d={collapsed ? "M13 10l2 2-2 2" : "M15 10l-2 2 2 2"} />
+              </svg>
             </button>
-          ) : (
-            <NavLink to="/" className="sidebar-brand">
-              <Logo size={28} />
-            </NavLink>
-          )}
-          <button
-            type="button"
-            className="icon-btn sidebar-toggle"
-            onClick={toggle}
-            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-            aria-expanded={!collapsed}
-            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-              <rect x="3.5" y="4.5" width="17" height="15" rx="2.5" />
-              <path d="M9 4.5v15" />
-              <path d={collapsed ? "M13 10l2 2-2 2" : "M15 10l-2 2 2 2"} />
-            </svg>
-          </button>
-        </div>
-        <nav aria-label="App">
-          {NAV.map(({ to, label, icon: Icon, end }) => (
-            <NavLink key={to} to={to} end={end} title={collapsed ? label : undefined} className={({ isActive }) => `side-link${isActive ? " active" : ""}`}>
-              <Icon />
-              <span className="side-label">{label}</span>
-            </NavLink>
-          ))}
-        </nav>
-        <div className="sidebar-user">
-          <span className="mono muted side-label">{user.email}</span>
-          <button className="link-btn" onClick={logout} title="Sign out">
-            Sign out
-          </button>
-        </div>
-      </aside>
-      <main className="shell-main">
-        <Outlet />
-      </main>
-    </div>
+          </div>
+          <nav aria-label="App">
+            {NAV.map(({ to, label, icon: Icon, end }) => (
+              <NavLink key={to} to={to} end={end} title={collapsed ? label : undefined} className={({ isActive }) => `side-link${isActive ? " active" : ""}`}>
+                <Icon />
+                <span className="side-label">{label}</span>
+              </NavLink>
+            ))}
+          </nav>
+          <FuelGauge collapsed={collapsed} />
+          <div className="sidebar-user">
+            <span className="mono muted side-label">{user.email}</span>
+            <button className="link-btn" onClick={logout} title="Sign out">
+              Sign out
+            </button>
+          </div>
+        </aside>
+        <main className="shell-main">
+          <Outlet />
+        </main>
+      </div>
+      {/* Outside .shell: its children get position: relative, and these are fixed overlays. */}
+      <NudgeDock />
+      <UpgradeModal />
+    </UpgradeProvider>
   );
 }

frontend/src/components/Nudges.tsx

@@ -0,0 +1,80 @@
+import { useNavigate } from "react-router-dom";
+import { useUpgrade } from "../hooks/useUpgrade";
+import { CometIcon, RocketIcon, SparkleIcon } from "./icons/Icons";
+
+const TONE_ICON = { limit: RocketIcon, upgrade: SparkleIcon, action: CometIcon };
+const TONE_LABEL = { limit: "Fuel check", upgrade: "Unlock", action: "Next mission" };
+
+/** One floating card, bottom right: the most useful next step, or a limit warning. */
+export function NudgeDock() {
+  const { nudge, dismissNudge, openUpgrade } = useUpgrade();
+  const navigate = useNavigate();
+  if (!nudge) return null;
+  const Icon = TONE_ICON[nudge.tone];
+  const go = () => {
+    dismissNudge(nudge.id);
+    if (nudge.to) navigate(nudge.to);
+    else openUpgrade();
+  };
+  return (
+    <aside key={nudge.id} className={`nudge nudge-${nudge.tone}`} role="status" aria-live="polite">
+      <span className="nudge-icon">
+        <Icon size={20} />
+      </span>
+      <div className="nudge-body">
+        <p className="eyebrow">{TONE_LABEL[nudge.tone]}</p>
+        <h3>{nudge.title}</h3>
+        <p className="muted small">{nudge.body}</p>
+        <div className="row">
+          <button className={`btn btn-small ${nudge.tone === "action" ? "" : "btn-primary"}`} onClick={go}>
+            {nudge.cta}
+          </button>
+          <button className="link-btn small" onClick={() => dismissNudge(nudge.id)}>
+            Not now
+          </button>
+        </div>
+      </div>
+      <button className="icon-btn nudge-close" onClick={() => dismissNudge(nudge.id)} aria-label="Dismiss">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+          <path d="M6 6l12 12M18 6L6 18" />
+        </svg>
+      </button>
+    </aside>
+  );
+}
+
+/** Sidebar card: plan, monthly meters and the upgrade button. Collapses to a rocket button. */
+export function FuelGauge({ collapsed }: { collapsed: boolean }) {
+  const { status, openUpgrade } = useUpgrade();
+  if (!status) return null;
+  const meters = status.meters.filter((m) => m.key !== "sources");
+  const low = meters.some((m) => m.limit >= 0 && m.pct >= 0.8);
+  if (collapsed) {
+    return status.can_upgrade ? (
+      <button className={`icon-btn fuel-mini${low ? " low" : ""}`} onClick={() => openUpgrade()} title="Upgrade" aria-label="Upgrade">
+        <RocketIcon />
+      </button>
+    ) : null;
+  }
+  return (
+    <div className={`fuel${low ? " low" : ""}`}>
+      <div className="row between">
+        <span className="mono small">{status.plan.name} plan</span>
+        {low && status.can_upgrade && <span className="mono small fuel-warn">Low fuel</span>}
+      </div>
+      {meters.map((m) => (
+        <div key={m.key} className="fuel-row" title={`${m.used} / ${m.limit < 0 ? "unlimited" : m.limit} ${m.unit}`}>
+          <span className="mono">{m.label}</span>
+          <div className="fuel-track">
+            <div className={`fuel-fill${m.pct >= 0.8 ? " hot" : ""}`} style={{ width: `${m.limit < 0 ? 4 : Math.max(3, m.pct * 100)}%` }} />
+          </div>
+        </div>
+      ))}
+      {status.can_upgrade && (
+        <button className="btn btn-primary btn-small fuel-cta" onClick={() => openUpgrade()}>
+          <RocketIcon size={16} /> Upgrade now
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/PricingTiers.tsx

@@ -63,7 +63,7 @@ const FALLBACK: Plan[] = [
   },
 ];
 
-function money(n: number): string {
+export function money(n: number): string {
   return Number.isInteger(n) ? `$${n}` : `$${n.toFixed(2)}`;
 }
 
@@ -72,7 +72,7 @@ function to99(amount: number): number {
   return amount <= 0 ? 0 : Math.max(0.99, Math.round(amount + 0.01) - 0.01);
 }
 
-function annualMonthly(plan: Plan): number {
+export function annualMonthly(plan: Plan): number {
   return plan.price_annual_monthly_usd ?? to99(plan.price_monthly_usd * (1 - ANNUAL_DISCOUNT));
 }
 
@@ -81,7 +81,7 @@ function savingsPct(plan: Plan): number {
   return plan.annual_savings_pct ?? Math.round((1 - annualMonthly(plan) / plan.price_monthly_usd) * 100);
 }
 
-function annualTotal(plan: Plan): number {
+export function annualTotal(plan: Plan): number {
   return plan.price_annual_usd ?? Math.round(annualMonthly(plan) * 12 * 100) / 100;
 }
 
@@ -146,7 +146,10 @@ export default function PricingTiers() {
                   </li>
                 ))}
               </ul>
-              <Link to="/auth?mode=signup" className={`btn ${featured ? "btn-primary" : ""} tier-cta`}>
+              <Link
+                to={billingEnabled && !free ? `/app?upgrade=${plan.id}` : "/auth?mode=signup"}
+                className={`btn ${featured ? "btn-primary" : ""} tier-cta`}
+              >
                 {billingEnabled && !free ? `Choose ${plan.name}` : "Start free"}
               </Link>
             </article>

frontend/src/components/UpgradeModal.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import type { BillingCycle } from "../api/endpoints";
+import type { Meter, PlanInfo } from "../api/types";
+import { useUpgrade } from "../hooks/useUpgrade";
+import { CheckIcon, RocketIcon } from "./icons/Icons";
+import { annualMonthly, annualTotal, money } from "./PricingTiers";
+
+const ORDER = ["free", "writer", "studio"];
+
+const LIMIT_TITLES: Record<string, string> = {
+  audio_minutes: "Out of audio fuel",
+  video_minutes: "Out of render fuel",
+  launch_kits: "Launch Kits used up",
+  sources: "Your station is full",
+  voice_cloning: "Voice cloning is locked",
+};
+
+/** What the plan adds over the current one, as short boost chips ("20x audio minutes"). */
+function boosts(plan: PlanInfo, current: PlanInfo): string[] {
+  const out: string[] = [];
+  const times = (a: number, b: number, label: string) => {
+    if (a < 0 && b >= 0) out.push(`Unlimited ${label}`);
+    else if (b > 0 && a > b) out.push(`${Math.round(a / b)}x ${label}`);
+  };
+  if (plan.sources > current.sources) out.push(`${plan.sources} sources`);
+  times(plan.audio_minutes, current.audio_minutes, "audio minutes");
+  times(plan.video_minutes, current.video_minutes, "video minutes");
+  times(plan.launch_kits, current.launch_kits, "Launch Kits");
+  if (plan.voice_cloning && !current.voice_cloning) out.push("Voice cloning");
+  if (plan.brand_kit && !current.brand_kit) out.push("Brand kit");
+  return out;
+}
+
+function resetDate(since: string | undefined): string {
+  const d = since ? new Date(since) : new Date();
+  const next = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1));
+  return next.toLocaleDateString(undefined, { month: "long", day: "numeric" });
+}
+
+function Scene({ mode }: { mode: "explore" | "limit" | "welcome" }) {
+  return (
+    <div className={`upg-scene upg-${mode}`} aria-hidden="true">
+      <div className="upg-stars l1" />
+      <div className="upg-stars l2" />
+      <div className="upg-stars l3" />
+      {mode === "explore" && <div className="upg-warp">{Array.from({ length: 14 }, (_, i) => <span key={i} />)}</div>}
+      {mode === "welcome" && <div className="upg-burst">{Array.from({ length: 16 }, (_, i) => <span key={i} />)}</div>}
+      <div className="upg-planet-wrap">
+        <svg className="upg-planet" viewBox="0 0 200 200">
+          <defs>
+            <radialGradient id="upg-body" cx="35%" cy="30%" r="75%">
+              <stop offset="0%" stopColor="#217cff" stopOpacity="0.95" />
+              <stop offset="55%" stopColor="#217cff" stopOpacity="0.35" />
+              <stop offset="100%" stopColor="#000" stopOpacity="1" />
+            </radialGradient>
+          </defs>
+          <ellipse cx="100" cy="104" rx="92" ry="20" className="upg-ring back" />
+          <circle cx="100" cy="100" r="52" fill="url(#upg-body)" />
+          <circle cx="84" cy="86" r="7" className="upg-crater" />
+          <circle cx="118" cy="112" r="4.5" className="upg-crater" />
+          <circle cx="106" cy="76" r="3" className="upg-crater" />
+          <path d="M8 104a92 20 0 0 0 184 0" className="upg-ring front" />
+        </svg>
+        <span className="upg-rocket">
+          <RocketIcon size={22} />
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function FuelMeter({ meter }: { meter: Meter }) {
+  const unlimited = meter.limit < 0;
+  return (
+    <div className="upg-fuel">
+      <div className="row between mono small">
+        <span>{meter.label}</span>
+        <span className="upg-empty">{meter.pct >= 1 ? "EMPTY" : `${Math.round(meter.pct * 100)}% used`}</span>
+      </div>
+      <div className="upg-fuel-track">
+        <div className="upg-fuel-fill" style={{ width: `${unlimited ? 4 : Math.max(4, meter.pct * 100)}%` }} />
+      </div>
+      <p className="mono muted small">
+        {meter.used} / {unlimited ? "unlimited" : meter.limit} {meter.unit}
+      </p>
+    </div>
+  );
+}
+
+export default function UpgradeModal() {
+  const { status, modal, close, checkout, busy, error } = useUpgrade();
+  const [cycle, setCycle] = useState<BillingCycle>("annual");
+  const panel = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!modal) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
+    document.addEventListener("keydown", onKey);
+    panel.current?.focus();
+    return () => document.removeEventListener("keydown", onKey);
+  }, [modal, close]);
+
+  if (!modal) return null;
+  const current = status?.plan;
+  const rank = ORDER.indexOf(current?.id ?? "free");
+  let offers = (status?.plans ?? []).filter((p) => ORDER.indexOf(p.id) > rank);
+  if (!offers.length && status && !status.billing_enabled) offers = status.plans.filter((p) => p.price_monthly_usd > 0);
+  const limit = modal.mode === "limit" ? modal.limit : null;
+  const recommended =
+    (modal.mode === "explore" && modal.highlight) || limit?.upgrade_to || status?.next_plan || offers[0]?.id;
+  const meter = limit?.kind ? status?.meters.find((m) => m.key === limit.kind) : undefined;
+  const canBuy = modal.mode !== "welcome" && offers.length > 0 && (status?.can_upgrade || !status?.billing_enabled);
+  const title =
+    modal.mode === "welcome"
+      ? `Welcome to ${current?.name ?? "your new plan"}`
+      : limit
+        ? LIMIT_TITLES[limit.kind ?? ""] ?? "You are out of fuel"
+        : "Explore more with an upgrade";
+
+  return (
+    <div className="upg-backdrop" onMouseDown={(e) => e.target === e.currentTarget && close()}>
+      <div className={`upg card${canBuy ? " upg-wide" : ""}`} role="dialog" aria-modal="true" aria-label={title} tabIndex={-1} ref={panel}>
+        <button className="icon-btn upg-close" onClick={close} aria-label="Close">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+            <path d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        </button>
+        <Scene mode={modal.mode} />
+
+        <header className="upg-head">
+          <p className="eyebrow">
+            {modal.mode === "welcome" ? "Orbit reached" : limit ? "Low fuel warning" : "Mission upgrade"}
+          </p>
+          <h2>{title}</h2>
+          <p className="muted">
+            {modal.mode === "welcome"
+              ? "Your new limits are live. Every source, minute and Launch Kit below is ready to use."
+              : limit
+                ? `${limit.message} ${canBuy ? "Upgrade and keep flying, or wait" : "Your allowance refills"} on ${resetDate(status?.since)}.`
+                : "Your archive has more orbits in it. More sources, more minutes and more Launch Kits, so every post gets a second life."}
+          </p>
+          {meter && <FuelMeter meter={meter} />}
+        </header>
+
+        {modal.mode === "welcome" && current && (
+          <>
+            <ul className="upg-features">
+              {current.features.map((f) => (
+                <li key={f}>
+                  <CheckIcon size={16} />
+                  {f}
+                </li>
+              ))}
+            </ul>
+            <div className="row end">
+              <Link to="/app/launch-kit" className="btn btn-primary" onClick={close}>
+                Launch something
+              </Link>
+            </div>
+          </>
+        )}
+
+        {canBuy && current && (
+          <>
+            <div className="upg-cycle">
+              <div className="cycle-toggle" role="radiogroup" aria-label="Billing cycle">
+                {(["monthly", "annual"] as const).map((c) => (
+                  <button key={c} type="button" role="radio" aria-checked={cycle === c} className={cycle === c ? "on" : ""} onClick={() => setCycle(c)}>
+                    {c === "monthly" ? "Monthly" : "Annual"}
+                    {c === "annual" && offers[0]?.annual_savings_pct > 0 && <span className="save mono">Save {offers[0].annual_savings_pct}%</span>}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="upg-plans">
+              {offers.map((plan) => {
+                const pick = plan.id === recommended;
+                const price = cycle === "annual" ? annualMonthly(plan) : plan.price_monthly_usd;
+                return (
+                  <article key={plan.id} className={`upg-plan${pick ? " pick" : ""}`}>
+                    {pick && <span className="badge upg-flag">{limit ? "Refuels you" : "Recommended"}</span>}
+                    <h3>{plan.name}</h3>
+                    <p className="muted small">{plan.tagline}</p>
+                    <p className="upg-price">
+                      {cycle === "annual" && <span className="tier-was muted">{money(plan.price_monthly_usd)}</span>}
+                      <span className="tier-amount">{money(price)}</span>
+                      <span className="muted">/month</span>
+                    </p>
+                    <p className="mono muted small">
+                      {cycle === "annual" ? `${money(annualTotal(plan))} billed yearly` : "Billed monthly"}
+                    </p>
+                    <ul className="upg-boosts">
+                      {boosts(plan, current).map((b) => (
+                        <li key={b} className="mono">
+                          {b}
+                        </li>
+                      ))}
+                    </ul>
+                    <button className={`btn ${pick ? "btn-primary" : ""} upg-cta`} disabled={busy} onClick={() => checkout(plan.id, cycle)}>
+                      {busy ? "Opening checkout..." : `Launch with ${plan.name}`}
+                    </button>
+                  </article>
+                );
+              })}
+            </div>
+          </>
+        )}
+
+        {error && <p className="error-text">{error}</p>}
+
+        {modal.mode !== "welcome" && (
+          <footer className="upg-foot mono small muted">
+            <span>Cancel anytime. Keep everything you made.</span>
+            <span className="row">
+              <Link to="/pricing" onClick={close}>
+                Compare plans
+              </Link>
+              <button className="link-btn" onClick={close}>
+                {canBuy ? "Maybe later" : "Got it"}
+              </button>
+            </span>
+          </footer>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/hooks/useUpgrade.tsx

@@ -0,0 +1,194 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { PLAN_LIMIT_EVENT, type PlanLimitDetail } from "../api/client";
+import { billingApi, type BillingCycle } from "../api/endpoints";
+import type { BillingStatus, Nudge } from "../api/types";
+import { errorMessage } from "../components/ui";
+import { ONBOARDED_KEY } from "../pages/Welcome";
+
+/**
+ * The upgrade system: billing status (plan, meters, nudges), the upgrade popup and nudge dismissals.
+ * Popup modes: explore (the opening pitch), limit (a request hit a 402 plan_limit), welcome (back from checkout).
+ */
+
+export type UpgradeModal =
+  | { mode: "explore"; highlight?: string | null }
+  | { mode: "limit"; limit: PlanLimitDetail }
+  | { mode: "welcome" };
+
+type UpgradeState = {
+  status: BillingStatus | null;
+  modal: UpgradeModal | null;
+  nudge: Nudge | null;
+  openUpgrade: (highlight?: string | null) => void;
+  close: () => void;
+  refresh: () => Promise<void>;
+  dismissNudge: (id: string) => void;
+  checkout: (plan: string, cycle: BillingCycle) => Promise<void>;
+  manageBilling: () => Promise<void>;
+  busy: boolean;
+  error: string | null;
+};
+
+const SEEN_KEY = "ns_upgrade_seen"; // last time the opening popup showed
+const DISMISSED_KEY = "ns_nudges_dismissed"; // { nudgeId: dismissedAtMs }
+const OPENING_EVERY_MS = 3 * 24 * 3600 * 1000; // opening popup at most every three days
+const NUDGE_SNOOZE_MS = 5 * 24 * 3600 * 1000; // a dismissed nudge stays away for five days
+const OPENING_DELAY_MS = 1400;
+const NUDGE_DELAY_MS = 5000;
+const REFRESH_EVERY_MS = 30_000;
+
+function readJson<T>(key: string, fallback: T): T {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? (JSON.parse(raw) as T) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeJson(key: string, value: unknown): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    /* private mode: remember for this visit only */
+  }
+}
+
+const UpgradeContext = createContext<UpgradeState | null>(null);
+
+export function UpgradeProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<BillingStatus | null>(null);
+  const [modal, setModal] = useState<UpgradeModal | null>(null);
+  const [dismissed, setDismissed] = useState<Record<string, number>>(() => readJson(DISMISSED_KEY, {}));
+  const [nudgeReady, setNudgeReady] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const lastFetch = useRef(0);
+  const openingDone = useRef(false);
+  const openingTimer = useRef<ReturnType<typeof setTimeout>>();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const refresh = useCallback(async () => {
+    lastFetch.current = Date.now();
+    try {
+      setStatus(await billingApi.status());
+    } catch {
+      /* the app works without it; nudges just stay hidden */
+    }
+  }, []);
+
+  // Fresh meters on navigation (throttled), so nudges follow what the user just did.
+  useEffect(() => {
+    if (Date.now() - lastFetch.current > REFRESH_EVERY_MS) refresh();
+    setNudgeReady(false);
+    const t = setTimeout(() => setNudgeReady(true), NUDGE_DELAY_MS);
+    return () => clearTimeout(t);
+  }, [location.pathname, refresh]);
+
+  // Any request that hits a plan limit opens the out of fuel popup.
+  useEffect(() => {
+    const onLimit = (e: Event) => {
+      setError(null);
+      setModal({ mode: "limit", limit: (e as CustomEvent<PlanLimitDetail>).detail });
+      refresh();
+    };
+    window.addEventListener(PLAN_LIMIT_EVENT, onLimit);
+    return () => window.removeEventListener(PLAN_LIMIT_EVENT, onLimit);
+  }, [refresh]);
+
+  // ?upgrade=1 opens the pitch (links from emails, the pricing page); ?checkout=success celebrates.
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const upgrade = params.get("upgrade");
+    const checkoutResult = params.get("checkout");
+    if (!upgrade && !checkoutResult) return;
+    if (upgrade) setModal({ mode: "explore", highlight: upgrade === "1" ? null : upgrade });
+    if (checkoutResult === "success") {
+      setModal({ mode: "welcome" });
+      refresh();
+    }
+    params.delete("upgrade");
+    params.delete("checkout");
+    const rest = params.toString();
+    navigate({ pathname: location.pathname, search: rest ? `?${rest}` : "" }, { replace: true });
+    openingDone.current = true;
+  }, [location.search, location.pathname, navigate, refresh]);
+
+  // The opening popup: once per few days for workspaces that can upgrade, after onboarding.
+  useEffect(() => {
+    if (!status || openingDone.current || !status.can_upgrade) return;
+    openingDone.current = true;
+    const onboarded = readJson<number | string>(ONBOARDED_KEY, 0) || status.meters.some((m) => m.key === "sources" && m.used > 0);
+    const seen = readJson<number>(SEEN_KEY, 0);
+    if (!onboarded || Date.now() - seen < OPENING_EVERY_MS) return;
+    // Not cleared when status refreshes; only on unmount (below), or it would never fire.
+    openingTimer.current = setTimeout(() => {
+      setModal((m) => m ?? { mode: "explore" });
+      writeJson(SEEN_KEY, Date.now());
+    }, OPENING_DELAY_MS);
+  }, [status]);
+
+  useEffect(() => () => clearTimeout(openingTimer.current), []);
+
+  const dismissNudge = useCallback((id: string) => {
+    setDismissed((d) => {
+      const next = { ...d, [id]: Date.now() };
+      writeJson(DISMISSED_KEY, next);
+      return next;
+    });
+    setNudgeReady(false); // the next one waits for the next page
+  }, []);
+
+  const nudge = useMemo(() => {
+    if (!status || !nudgeReady || modal) return null;
+    const now = Date.now();
+    return (
+      status.nudges.find(
+        (n) => !(dismissed[n.id] && now - dismissed[n.id] < NUDGE_SNOOZE_MS) && n.to !== location.pathname,
+      ) ?? null
+    );
+  }, [status, nudgeReady, modal, dismissed, location.pathname]);
+
+  const redirectTo = useCallback(async (get: () => Promise<{ url: string }>) => {
+    setBusy(true);
+    setError(null);
+    try {
+      window.location.assign((await get()).url);
+    } catch (e) {
+      setError(errorMessage(e));
+      setBusy(false);
+    }
+  }, []);
+
+  const value = useMemo<UpgradeState>(
+    () => ({
+      status,
+      modal,
+      nudge,
+      openUpgrade: (highlight) => {
+        setError(null);
+        setModal({ mode: "explore", highlight });
+      },
+      close: () => {
+        setModal(null);
+        setError(null);
+      },
+      refresh,
+      dismissNudge,
+      checkout: (plan, cycle) => redirectTo(() => billingApi.checkout(plan, cycle)),
+      manageBilling: () => redirectTo(billingApi.portal),
+      busy,
+      error,
+    }),
+    [status, modal, nudge, refresh, dismissNudge, redirectTo, busy, error],
+  );
+  return <UpgradeContext.Provider value={value}>{children}</UpgradeContext.Provider>;
+}
+
+export function useUpgrade(): UpgradeState {
+  const ctx = useContext(UpgradeContext);
+  if (!ctx) throw new Error("useUpgrade must be used inside UpgradeProvider");
+  return ctx;
+}

frontend/src/main.tsx

@@ -6,6 +6,7 @@ import { AuthProvider } from "./hooks/useAuth";
 import "./styles/global.css";
 import "./styles/app.css";
 import "./styles/pages.css";
+import "./styles/upgrade.css";
 import { installClickSounds } from "./lib/sound";
 
 installClickSounds();

frontend/src/pages/Settings.tsx

@@ -6,6 +6,7 @@ import { settingsApi, type SettingsPatch } from "../api/endpoints";
 import type { Settings as SettingsData } from "../api/types";
 import { ConfirmButton, errorMessage, Loading, PageHeader } from "../components/ui";
 import { useAuth } from "../hooks/useAuth";
+import { useUpgrade } from "../hooks/useUpgrade";
 import { setSoundsEnabled, soundsEnabled } from "../lib/sound";
 
 function Meter({ label, used, limit, unit }: { label: string; used: number; limit: number; unit: string }) {
@@ -46,6 +47,7 @@ export default function Settings() {
   const logoRef = useRef<HTMLInputElement>(null);
   const [sounds, setSounds] = useState(soundsEnabled);
   const { logout } = useAuth();
+  const upgrade = useUpgrade();
   const navigate = useNavigate();
 
   const hydrate = (d: SettingsData) => {
@@ -177,6 +179,24 @@ export default function Settings() {
             <Meter label="Audio overviews" used={u.used.audio_minutes} limit={u.limits.audio_minutes} unit="min" />
             <Meter label="Video renders" used={u.used.video_minutes} limit={u.limits.video_minutes} unit="min" />
             <Meter label="Launch Kits" used={u.used.launch_kits} limit={u.limits.launch_kits} unit="" />
+            <p className="mono muted small">
+              Refills on the 1st of every month.
+            </p>
+            {s.billing_enabled && (
+              <div className="row">
+                {upgrade.status?.can_upgrade && (
+                  <button className="btn btn-primary btn-small" onClick={() => upgrade.openUpgrade()}>
+                    Upgrade now
+                  </button>
+                )}
+                {upgrade.status?.has_billing_account && (
+                  <button className="btn btn-small" disabled={upgrade.busy} onClick={() => upgrade.manageBilling()}>
+                    Manage billing
+                  </button>
+                )}
+              </div>
+            )}
+            {upgrade.error && !upgrade.modal && <p className="error-text">{upgrade.error}</p>}
             <p className="mono muted small">
               {s.plan.sources} sources · {s.plan.indexed_posts.toLocaleString()} indexed posts · {u.used.llm_tokens.toLocaleString()} LLM tokens this month
             </p>

frontend/src/styles/upgrade.css

@@ -0,0 +1,603 @@
+/* Upgrade system: the space popup, the nudge dock and the sidebar fuel gauge.
+   Strict palette: black, #217cff, white. */
+
+/* ---------- Popup ---------- */
+.upg-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(6px);
+  animation: upg-fade 0.25s ease both;
+}
+
+.upg {
+  position: relative;
+  width: min(540px, 100%);
+  max-height: calc(100vh - 32px);
+  overflow: auto;
+  display: grid;
+  gap: 18px;
+  padding: 0 22px 20px;
+  background: var(--black);
+  border-color: var(--blue-35);
+  box-shadow: var(--glow-lg), 0 0 0 1px var(--blue-10) inset;
+  animation: upg-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.upg:focus {
+  outline: none;
+}
+
+.upg-wide {
+  width: min(800px, 100%);
+}
+
+.upg-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.upg-head {
+  display: grid;
+  gap: 8px;
+  text-align: center;
+  justify-items: center;
+}
+
+.upg-head h2 {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 4vw, 2.1rem);
+  line-height: 1.1;
+  margin: 0;
+}
+
+.upg-head > p.muted {
+  max-width: 52ch;
+  margin: 0;
+}
+
+/* Scene: drifting stars, a ringed planet and a rocket on orbit */
+.upg-scene {
+  position: relative;
+  height: 190px;
+  margin: 0 -22px;
+  overflow: hidden;
+  background:
+    radial-gradient(60% 90% at 50% 100%, var(--blue-20), transparent 70%),
+    radial-gradient(40% 60% at 50% 60%, var(--blue-10), transparent 70%),
+    var(--black);
+  border-bottom: 1px solid var(--line);
+  mask-image: linear-gradient(to bottom, #000 70%, transparent);
+}
+
+.upg-stars {
+  position: absolute;
+  inset: -50% 0 0;
+  background-repeat: repeat;
+  animation: upg-drift linear infinite;
+}
+
+.upg-stars.l1 {
+  background-image:
+    radial-gradient(1px 1px at 12px 18px, rgba(255, 255, 255, 0.7), transparent),
+    radial-gradient(1px 1px at 70px 90px, rgba(255, 255, 255, 0.5), transparent),
+    radial-gradient(1px 1px at 130px 40px, rgba(255, 255, 255, 0.6), transparent);
+  background-size: 160px 120px;
+  animation-duration: 40s;
+}
+
+.upg-stars.l2 {
+  background-image:
+    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, 0.85), transparent),
+    radial-gradient(1.5px 1.5px at 190px 20px, rgba(33, 124, 255, 0.9), transparent);
+  background-size: 240px 150px;
+  animation-duration: 24s;
+}
+
+.upg-stars.l3 {
+  background-image:
+    radial-gradient(2px 2px at 80px 30px, #fff, transparent),
+    radial-gradient(2px 2px at 260px 110px, rgba(33, 124, 255, 1), transparent);
+  background-size: 340px 180px;
+  animation-duration: 14s;
+}
+
+.upg-planet-wrap {
+  position: absolute;
+  left: 50%;
+  top: 54%;
+  width: 170px;
+  height: 170px;
+  transform: translate(-50%, -50%);
+}
+
+.upg-planet {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 0 24px var(--blue-35));
+  animation: upg-bob 6s ease-in-out infinite;
+}
+
+.upg-ring {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.55);
+  stroke-width: 1.5;
+}
+
+.upg-ring.back {
+  stroke: rgba(255, 255, 255, 0.2);
+}
+
+.upg-crater {
+  fill: rgba(0, 0, 0, 0.35);
+  stroke: rgba(255, 255, 255, 0.15);
+}
+
+/* The rocket flies an ellipse around the planet (the ring's plane). */
+.upg-rocket {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  color: var(--white);
+  filter: drop-shadow(0 0 6px var(--blue));
+  offset-path: path("M -20 92 a 105 32 0 1 0 210 0 a 105 32 0 1 0 -210 0");
+  offset-rotate: 0deg;
+  animation: upg-fly 9s linear infinite;
+}
+
+/* Explore: warp streaks racing past */
+.upg-warp span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 90px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
+  transform-origin: 0 50%;
+  opacity: 0;
+  animation: upg-warp 2.6s ease-in infinite;
+}
+
+.upg-warp span:nth-child(odd) {
+  background: linear-gradient(90deg, transparent, var(--blue));
+}
+
+.upg-warp span:nth-child(1) { --a: 8deg; animation-delay: 0s; }
+.upg-warp span:nth-child(2) { --a: 34deg; animation-delay: 0.3s; }
+.upg-warp span:nth-child(3) { --a: 61deg; animation-delay: 1.1s; }
+.upg-warp span:nth-child(4) { --a: 97deg; animation-delay: 0.7s; }
+.upg-warp span:nth-child(5) { --a: 128deg; animation-delay: 1.6s; }
+.upg-warp span:nth-child(6) { --a: 152deg; animation-delay: 0.2s; }
+.upg-warp span:nth-child(7) { --a: 181deg; animation-delay: 1.3s; }
+.upg-warp span:nth-child(8) { --a: 206deg; animation-delay: 0.5s; }
+.upg-warp span:nth-child(9) { --a: 233deg; animation-delay: 1.9s; }
+.upg-warp span:nth-child(10) { --a: 262deg; animation-delay: 0.9s; }
+.upg-warp span:nth-child(11) { --a: 289deg; animation-delay: 2.2s; }
+.upg-warp span:nth-child(12) { --a: 312deg; animation-delay: 0.4s; }
+.upg-warp span:nth-child(13) { --a: 337deg; animation-delay: 1.4s; }
+.upg-warp span:nth-child(14) { --a: 355deg; animation-delay: 2s; }
+
+/* Limit: the rocket sputters, the planet dims */
+.upg-limit .upg-planet {
+  filter: drop-shadow(0 0 10px var(--blue-20)) saturate(0.6);
+}
+
+.upg-limit .upg-rocket {
+  animation:
+    upg-fly 28s linear infinite,
+    upg-sputter 1.4s steps(2, jump-none) infinite;
+}
+
+/* Welcome: a burst of sparkles */
+.upg-burst span {
+  position: absolute;
+  top: 54%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  margin: -3px;
+  border-radius: 50%;
+  background: var(--white);
+  box-shadow: 0 0 10px var(--blue);
+  animation: upg-burst 1.6s cubic-bezier(0.1, 0.7, 0.2, 1) both;
+}
+
+.upg-burst span:nth-child(3n) {
+  background: var(--blue);
+}
+
+.upg-burst span:nth-child(1) { --a: 0deg; }
+.upg-burst span:nth-child(2) { --a: 22deg; animation-delay: 0.05s; }
+.upg-burst span:nth-child(3) { --a: 45deg; }
+.upg-burst span:nth-child(4) { --a: 67deg; animation-delay: 0.1s; }
+.upg-burst span:nth-child(5) { --a: 90deg; }
+.upg-burst span:nth-child(6) { --a: 112deg; animation-delay: 0.05s; }
+.upg-burst span:nth-child(7) { --a: 135deg; }
+.upg-burst span:nth-child(8) { --a: 157deg; animation-delay: 0.1s; }
+.upg-burst span:nth-child(9) { --a: 180deg; }
+.upg-burst span:nth-child(10) { --a: 202deg; animation-delay: 0.05s; }
+.upg-burst span:nth-child(11) { --a: 225deg; }
+.upg-burst span:nth-child(12) { --a: 247deg; animation-delay: 0.1s; }
+.upg-burst span:nth-child(13) { --a: 270deg; }
+.upg-burst span:nth-child(14) { --a: 292deg; animation-delay: 0.05s; }
+.upg-burst span:nth-child(15) { --a: 315deg; }
+.upg-burst span:nth-child(16) { --a: 337deg; animation-delay: 0.1s; }
+
+/* Fuel meter (limit mode) */
+.upg-fuel {
+  width: min(360px, 100%);
+  display: grid;
+  gap: 6px;
+  margin-top: 6px;
+  text-align: left;
+}
+
+.upg-fuel p {
+  margin: 0;
+}
+
+.upg-empty {
+  color: var(--blue);
+  animation: upg-blink 1.2s steps(2, jump-none) infinite;
+}
+
+.upg-fuel-track {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+
+.upg-fuel-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--blue-60), var(--blue));
+  box-shadow: var(--glow-sm);
+}
+
+/* Plans */
+.upg-cycle {
+  display: flex;
+  justify-content: center;
+}
+
+.upg-plans {
+  display: grid;
+  gap: 14px;
+}
+
+@media (min-width: 640px) {
+  .upg-plans {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+}
+
+.upg-plan {
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  padding: 18px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.upg-plan.pick {
+  border-color: var(--blue);
+  background: linear-gradient(180deg, var(--blue-10), transparent 60%);
+  box-shadow: var(--glow-md);
+}
+
+.upg-plan h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+}
+
+.upg-plan p {
+  margin: 0;
+}
+
+.upg-flag {
+  position: absolute;
+  top: -11px;
+  right: 14px;
+  background: var(--blue);
+  border-color: var(--blue);
+}
+
+.upg-price {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-top: 6px !important;
+}
+
+.upg-price .tier-amount {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.upg-boosts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 8px 0 12px;
+  padding: 0;
+  list-style: none;
+}
+
+.upg-boosts li {
+  padding: 3px 9px;
+  border: 1px solid var(--blue-35);
+  border-radius: 999px;
+  background: var(--blue-05);
+  font-size: 0.72rem;
+}
+
+.upg-cta {
+  width: 100%;
+  justify-content: center;
+  margin-top: auto;
+}
+
+.upg-features {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.upg-features li {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.upg-features .icon {
+  color: var(--blue);
+  flex: none;
+}
+
+.upg-foot {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+
+.upg-foot .row {
+  gap: 16px;
+}
+
+.upg-foot a {
+  color: var(--white);
+}
+
+/* ---------- Nudge dock ---------- */
+.nudge {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  left: 16px;
+  z-index: 40;
+  display: flex;
+  gap: 12px;
+  padding: 14px 36px 14px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius);
+  background: rgba(0, 0, 0, 0.92);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--glow-lg);
+  animation: nudge-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+@media (min-width: 640px) {
+  .nudge {
+    left: auto;
+    width: 360px;
+    right: 24px;
+    bottom: 24px;
+  }
+}
+
+.nudge-limit,
+.nudge-upgrade {
+  border-color: var(--blue-60);
+}
+
+.nudge-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 1px solid var(--blue-35);
+  background: var(--blue-10);
+  color: var(--white);
+}
+
+.nudge-limit .nudge-icon {
+  background: var(--blue);
+  box-shadow: var(--glow-sm);
+  animation: pulse-ring 2s ease-out infinite;
+}
+
+.nudge-body {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.nudge-body h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.nudge-body p {
+  margin: 0;
+}
+
+.nudge-body .eyebrow {
+  font-size: 0.65rem;
+}
+
+.nudge-body .row {
+  margin-top: 4px;
+  gap: 14px;
+}
+
+.nudge-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 26px;
+  height: 26px;
+}
+
+/* ---------- Sidebar fuel gauge ---------- */
+.fuel,
+.fuel-mini {
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .fuel {
+    display: grid;
+    gap: 8px;
+    margin-top: auto;
+    padding: 12px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    background: var(--surface);
+  }
+
+  .fuel + .sidebar-user {
+    margin-top: 0;
+  }
+
+  .fuel.low {
+    border-color: var(--blue-35);
+    box-shadow: var(--glow-sm);
+  }
+
+  .fuel-warn {
+    color: var(--blue);
+  }
+
+  .fuel-row {
+    display: grid;
+    gap: 4px;
+    font-size: 0.7rem;
+    color: var(--text-2);
+  }
+
+  .fuel-track {
+    height: 4px;
+    border-radius: 999px;
+    background: var(--surface-2);
+    overflow: hidden;
+  }
+
+  .fuel-fill {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--blue-60);
+  }
+
+  .fuel-fill.hot {
+    background: var(--blue);
+    box-shadow: var(--glow-sm);
+  }
+
+  .fuel-cta {
+    width: 100%;
+    justify-content: center;
+    gap: 6px;
+    margin-top: 4px;
+  }
+
+  .shell.collapsed .fuel {
+    display: none;
+  }
+
+  .shell.collapsed .fuel-mini {
+    display: inline-grid;
+    margin-top: auto;
+    color: var(--white);
+    border-color: var(--blue-35);
+  }
+
+  .fuel-mini.low {
+    background: var(--blue);
+    box-shadow: var(--glow-sm);
+  }
+}
+
+/* ---------- Motion ---------- */
+@keyframes upg-fade {
+  from { opacity: 0; }
+}
+
+@keyframes upg-rise {
+  from { opacity: 0; transform: translateY(24px) scale(0.97); }
+}
+
+@keyframes upg-drift {
+  to { transform: translateY(50%); }
+}
+
+@keyframes upg-bob {
+  50% { transform: translateY(-5px); }
+}
+
+@keyframes upg-fly {
+  to { offset-distance: 100%; }
+}
+
+@keyframes upg-warp {
+  0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scaleX(0.2); }
+  30% { opacity: 1; }
+  100% { opacity: 0; transform: rotate(var(--a)) translateX(360px) scaleX(1.4); }
+}
+
+@keyframes upg-burst {
+  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.4); }
+  100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scale(0.3); }
+}
+
+@keyframes upg-sputter {
+  50% { opacity: 0.35; }
+}
+
+@keyframes upg-blink {
+  50% { opacity: 0.3; }
+}
+
+@keyframes nudge-in {
+  from { opacity: 0; transform: translateY(20px); }
+}
+
+@keyframes pulse-ring {
+  0% { box-shadow: 0 0 0 0 var(--blue-60); }
+  100% { box-shadow: 0 0 0 12px transparent; }
+}

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/api/auth.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/stream.ts","./src/api/types.ts","./src/components/appshell.tsx","./src/components/artifactcard.tsx","./src/components/docpicker.tsx","./src/components/featureshowcase.tsx","./src/components/logo.tsx","./src/components/markdown.tsx","./src/components/pricingtiers.tsx","./src/components/publicchrome.tsx","./src/components/reader.tsx","./src/components/schedulemodal.tsx","./src/components/skycanvas.tsx","./src/components/ui.tsx","./src/components/icons/icons.tsx","./src/content/blogposts.ts","./src/content/missionposts.ts","./src/content/seotypes.ts","./src/hooks/useauth.tsx","./src/hooks/usejob.ts","./src/lib/sound.ts","./src/pages/archive.tsx","./src/pages/authcallback.tsx","./src/pages/authpage.tsx","./src/pages/blog.tsx","./src/pages/landing.tsx","./src/pages/launchkit.tsx","./src/pages/launchpad.tsx","./src/pages/missioncontrol.tsx","./src/pages/notebooklmalternative.tsx","./src/pages/notebookview.tsx","./src/pages/notebooks.tsx","./src/pages/resurface.tsx","./src/pages/settings.tsx","./src/pages/sources.tsx","./src/pages/studio.tsx","./src/pages/topicmap.tsx","./src/pages/voiceprofile.tsx","./src/pages/welcome.tsx"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/api/auth.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/stream.ts","./src/api/types.ts","./src/components/appshell.tsx","./src/components/artifactcard.tsx","./src/components/docpicker.tsx","./src/components/featureshowcase.tsx","./src/components/logo.tsx","./src/components/markdown.tsx","./src/components/nudges.tsx","./src/components/pricingtiers.tsx","./src/components/publicchrome.tsx","./src/components/reader.tsx","./src/components/schedulemodal.tsx","./src/components/skycanvas.tsx","./src/components/upgrademodal.tsx","./src/components/ui.tsx","./src/components/icons/icons.tsx","./src/content/blogposts.ts","./src/content/missionposts.ts","./src/content/seotypes.ts","./src/hooks/useauth.tsx","./src/hooks/usejob.ts","./src/hooks/useupgrade.tsx","./src/lib/sound.ts","./src/pages/archive.tsx","./src/pages/authcallback.tsx","./src/pages/authpage.tsx","./src/pages/blog.tsx","./src/pages/landing.tsx","./src/pages/launchkit.tsx","./src/pages/launchpad.tsx","./src/pages/missioncontrol.tsx","./src/pages/notebooklmalternative.tsx","./src/pages/notebookview.tsx","./src/pages/notebooks.tsx","./src/pages/resurface.tsx","./src/pages/settings.tsx","./src/pages/sources.tsx","./src/pages/studio.tsx","./src/pages/topicmap.tsx","./src/pages/voiceprofile.tsx","./src/pages/welcome.tsx"],"version":"5.6.3"}

renderer/public/demo-vo/durations.json

@@ -1,10 +1,10 @@
 {
-  "warp": 3.69,
-  "paste": 8.34,
-  "orbit": 5.96,
-  "research": 4.39,
-  "audio": 4.57,
-  "launchkit": 5.83,
-  "launchpad": 3.14,
-  "outro": 2.56
+  "warp": 3.92,
+  "paste": 6.95,
+  "orbit": 6.61,
+  "research": 3.74,
+  "audio": 2.67,
+  "launchkit": 3.32,
+  "launchpad": 4.05,
+  "outro": 2.48
 }

renderer/public/launch-vo/durations.json

@@ -1,14 +1,14 @@
 {
-  "intro": 5.78,
-  "launch": 3.03,
-  "sources": 6.14,
+  "intro": 5.83,
+  "launch": 2.9,
+  "sources": 6.38,
   "research": 4.16,
-  "map": 6.12,
-  "voice": 4.57,
-  "audio": 3.69,
-  "video": 4.44,
-  "launchkit": 4.7,
-  "launchpad": 3.32,
-  "resurface": 4.23,
-  "outro": 5.17
+  "map": 4.47,
+  "voice": 3.56,
+  "audio": 3.19,
+  "video": 5.88,
+  "launchkit": 3.69,
+  "launchpad": 4.94,
+  "resurface": 4.44,
+  "outro": 6.3
 }

renderer/scripts/make_demo_vo.py

@@ -1,8 +1,8 @@
 """Narration for the landing page demo (Nora Vale, Mission Control). Writes public/demo-vo/*.mp3 + durations.json.
 
-The screens show the product; the voice says what it feels like. Then copy the printed durations
-into VO_SECONDS in src/compositions/LandingDemo.tsx (and lengthen a scene if its line no longer fits).
-make_demo_music.py writes the 47.5 s score; rerun it with a larger TOTAL if the demo grows past that.
+The screens show the product; the voice never explains it, it only says how it feels: exploring,
+excited, mesmerized. Also writes src/compositions/demoVo.ts; scenes stretch to fit their lines.
+Then run make_demo_music.py, which reads the same file to size the score.
 
     cd backend && PYTHONPATH=. .venv/Scripts/python ../renderer/scripts/make_demo_vo.py
 """
@@ -17,13 +17,13 @@ OUT = Path(__file__).resolve().parents[1] / "public" / "demo-vo"
 OUT.mkdir(parents=True, exist_ok=True)
 
 LINES = {
-    "warp": "Captain's log. Your knowledge... is now in orbit.",
-    "paste": "Just point us at your writing. Any blog, any site, any folder of notes. Then sit back.",
-    "orbit": "Watch years of work come home. Every idea you've had, finally within reach.",
-    "research": "Ask, and hear your own best thinking answer back. With proof.",
-    "audio": "Hear your ideas as a conversation. Like meeting your work for the first time.",
-    "launchkit": "No more blank page. Next week's posts are already here, and they sound like you.",
-    "launchpad": "Press schedule, and feel the weight lift off.",
+    "warp": "Captain's log. Something wonderful is on the horizon.",
+    "paste": "Take a breath. That flutter of excitement? That's how every great expedition begins.",
+    "orbit": "And there it is. Everything you've made, shimmering... impossible to look away.",
+    "research": "A question sparks, and suddenly you're wide awake.",
+    "audio": "Lean back. Let it wash over you.",
+    "launchkit": "Your pulse quickens. You can't wait to share this.",
+    "launchpad": "Three, two, one... and you're flying.",
     "outro": "Notestack. Clear skies ahead.",
 }
 
@@ -39,4 +39,8 @@ for i, key in enumerate(keys):
     (OUT / f"{key}.mp3").write_bytes(clip)
     durations[key] = round(tts.mp3_seconds(clip), 2)
 (OUT / "durations.json").write_text(json.dumps(durations, indent=2))
+(Path(__file__).resolve().parents[1] / "src" / "compositions" / "demoVo.ts").write_text(
+    "// Generated by scripts/make_demo_vo.py: narration clip lengths in seconds. Do not edit by hand.\n"
+    f"export const DEMO_VO_SECONDS = {json.dumps(durations)} as const;\n"
+)
 print(json.dumps(durations))

renderer/scripts/make_launch_vo.py

@@ -1,6 +1,6 @@
 """Narration for the launch trailer (Nora Vale, Mission Control). Writes public/launch-vo/*.mp3 + durations.json.
 
-The screens show what each feature does; the voice carries what it feels like to use it.
+The voice never explains the product. It only says how the journey feels: exploring, excited, mesmerized.
 
 Run from backend/ (uses its ElevenLabs client and .env), then run make_launch_music.py:
     cd backend && PYTHONPATH=. .venv/Scripts/python ../renderer/scripts/make_launch_vo.py
@@ -16,18 +16,18 @@ OUT = Path(__file__).resolve().parents[1] / "public" / "launch-vo"
 OUT.mkdir(parents=True, exist_ok=True)
 
 LINES = {
-    "intro": "You have written more than you remember. Whole worlds of ideas... still uncharted.",
-    "launch": "Take a breath. We're going exploring.",
-    "sources": "Watch years of your writing drift back into view. Nothing lost. Nothing forgotten.",
-    "research": "Ask a question, and hear your own best thinking answer back.",
-    "map": "See the shape of your mind. The ideas you keep coming home to, and the ones still waiting.",
-    "voice": "Everything it makes sounds like you. On your best day.",
-    "audio": "Hear your ideas come alive, as a conversation.",
-    "video": "Watch your words move, glow, and find new eyes.",
-    "launchkit": "One post. A whole week of posts. And never a blank page.",
-    "launchpad": "Press schedule, and feel the weight lift off.",
-    "resurface": "And the gems you forgot you wrote? They find their way back to you.",
-    "outro": "Notestack A.I. The galaxies of your untapped potential. Coming soon.",
+    "intro": "There's a feeling you get at the edge of something vast. Curious. A little breathless.",
+    "launch": "Hold on. Here we go.",
+    "sources": "Everything you've ever made, glowing back at you. Like seeing Earth from orbit for the first time.",
+    "research": "That spark, when a thought you'd forgotten lights up again.",
+    "map": "You drift through your own ideas... and you can't look away.",
+    "voice": "It feels like you. Only braver.",
+    "audio": "Lean back. Let it wash over you.",
+    "video": "Color. Motion. Wonder. You'll want to watch it twice.",
+    "launchkit": "Your heart races a little. The good kind of nervous.",
+    "launchpad": "Three, two, one... and you're flying.",
+    "resurface": "And then, out of the dark, an old favorite shines again.",
+    "outro": "Notestack A.I. Come explore the galaxies of your untapped potential. Coming soon.",
 }
 
 voice_id = next(v["voice_id"] for v in tts.list_voices() if v["name"].startswith("Nora Vale"))

renderer/src/compositions/LaunchTrailer.tsx

@@ -1,7 +1,8 @@
 import type { CSSProperties, ReactNode } from "react";
-import { AbsoluteFill, Audio as SoundTrack, Easing, Img, interpolate, random, Sequence, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { AbsoluteFill, Audio as SoundTrack, Easing, interpolate, random, Sequence, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
 import { theme } from "../theme";
 import { Flare, WarpField } from "./LandingDemo";
+import { Lockup } from "./Lockup";
 import { LAUNCH_BPM, LAUNCH_SCENES, LAUNCH_SECONDS, type LaunchSceneId } from "./launchTimeline";
 
 /** Launch trailer: a journey of knowledge through the galaxies of untapped potential.
@@ -137,15 +138,15 @@ function typed(text: string, frame: number, start: number, cps = 30): string {
 // ---------------------------------------------------------------- journey HUD
 
 const STOPS: { id: LaunchSceneId; short: string; name: string; line: string }[] = [
-  { id: "sources", short: "Sources", name: "The Source Nebula", line: "Any blog, newsletter, website or markdown, pulled into orbit." },
-  { id: "research", short: "Research", name: "The Research Cluster", line: "Answers cited to the exact lines you wrote." },
-  { id: "map", short: "Topic map", name: "The Constellation Field", line: "See which ideas are rising, and which went dark." },
-  { id: "voice", short: "Voice", name: "The Voice Pulsar", line: "Everything it makes still sounds like you." },
-  { id: "audio", short: "Audio", name: "The Audio Belt", line: "Two host audio overviews of any notebook." },
-  { id: "video", short: "Studio", name: "The Studio Galaxy", line: "Shorts, explainers, audiograms and quote cards." },
-  { id: "launchkit", short: "Launch Kit", name: "The Launch Kit Spiral", line: "Threads, LinkedIn, Notes, SEO and carousels." },
-  { id: "launchpad", short: "Launchpad", name: "The Launchpad", line: "Schedule and auto post to X, LinkedIn and Bluesky." },
-  { id: "resurface", short: "Resurface", name: "The Evergreen Belt", line: "Your best old posts, back in orbit." },
+  { id: "sources", short: "Sources", name: "The Source Nebula", line: "Everything you made, glowing back at you." },
+  { id: "research", short: "Research", name: "The Research Cluster", line: "The spark of a thought you forgot you had." },
+  { id: "map", short: "Topic map", name: "The Constellation Field", line: "Drift through your own ideas. Stay a while." },
+  { id: "voice", short: "Voice", name: "The Voice Pulsar", line: "It feels like you. Only braver." },
+  { id: "audio", short: "Audio", name: "The Audio Belt", line: "Lean back. Let it wash over you." },
+  { id: "video", short: "Studio", name: "The Studio Galaxy", line: "Color, motion, wonder. Watch it twice." },
+  { id: "launchkit", short: "Launch Kit", name: "The Launch Kit Spiral", line: "Your heart races. The good kind of nervous." },
+  { id: "launchpad", short: "Launchpad", name: "The Launchpad", line: "Three, two, one, and you are flying." },
+  { id: "resurface", short: "Resurface", name: "The Evergreen Belt", line: "An old favorite, shining again." },
 ];
 
 function Hud({ index }: { index: number }) {
@@ -158,8 +159,8 @@ function Hud({ index }: { index: number }) {
   const px = (i: number) => x0 + ((x1 - x0) * i) / (STOPS.length - 1);
   return (
     <AbsoluteFill style={{ opacity: inn }}>
-      <div style={{ position: "absolute", left: 80, top: 56, fontFamily: theme.mono, fontSize: 20, letterSpacing: 5, color: "rgba(255,255,255,0.6)" }}>
-        NOTESTACK EXPEDITION
+      <div style={{ position: "absolute", left: 80, top: 44 }}>
+        <Lockup size={44} glow={0.6} />
       </div>
       <div style={{ position: "absolute", right: 80, top: 56, fontFamily: theme.mono, fontSize: 20, letterSpacing: 5, color: BLUE }}>
         GALAXY {String(index + 1).padStart(2, "0")} / {String(STOPS.length).padStart(2, "0")}
@@ -200,8 +201,8 @@ function Stop({ id, children }: { id: LaunchSceneId; children: ReactNode }) {
   const visual = useIn(10, 17);
   return (
     <Space drift={1.4}>
-      <div style={{ position: "absolute", inset: 0, transform: `scale(${approach})`, transformOrigin: "1260px 520px" }}>
-        <Galaxy seed={`g-${id}`} x={1260} y={520} size={430} tilt={0.42 + random(`t-${id}`) * 0.3} arms={2 + (index % 2)} coreBoost={pulse * 0.25} />
+      <div style={{ position: "absolute", inset: 0, transform: `scale(${approach})`, transformOrigin: "1350px 520px" }}>
+        <Galaxy seed={`g-${id}`} x={1350} y={520} size={430} tilt={0.42 + random(`t-${id}`) * 0.3} arms={2 + (index % 2)} coreBoost={pulse * 0.25} />
       </div>
       <AbsoluteFill style={{ background: "linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 38%, transparent 62%)" }} />
       <div style={{ position: "absolute", left: 120, top: 250, width: 700 }}>
@@ -225,6 +226,66 @@ function Stop({ id, children }: { id: LaunchSceneId; children: ReactNode }) {
 
 // ---------------------------------------------------------------- feature visuals (900 x 660 box)
 
+/** A ringed planet, like the one in the logo: lit sphere, atmosphere, and a tilted ring whose far
+ * side passes behind the body and near side in front. Drawn in its own layer above the orbits. */
+function Planet({ cx, cy, r }: { cx: number; cy: number; r: number }) {
+  const frame = useCurrentFrame();
+  const tilt = -18;
+  const rx = r * 1.75;
+  const ry = r * 0.36;
+  const shimmer = 0.75 + 0.25 * Math.sin(frame * 0.08);
+  const ring = (half: "back" | "front") => (
+    <path
+      d={half === "back" ? `M ${-rx} 0 A ${rx} ${ry} 0 0 1 ${rx} 0` : `M ${rx} 0 A ${rx} ${ry} 0 0 1 ${-rx} 0`}
+      fill="none"
+      stroke={half === "back" ? "#9cc4ff" : WHITE}
+      strokeOpacity={half === "back" ? 0.45 : 0.95}
+      strokeWidth={r * 0.1}
+      strokeLinecap="round"
+    />
+  );
+  return (
+    <svg width={900} height={660} style={{ position: "absolute", left: 0, top: 0, overflow: "visible", zIndex: 1 }}>
+      <defs>
+        <radialGradient id="planet-body" cx="36%" cy="32%" r="75%">
+          <stop offset="0%" stopColor="#ffffff" />
+          <stop offset="14%" stopColor="#bcd8ff" />
+          <stop offset="42%" stopColor={BLUE} />
+          <stop offset="78%" stopColor="#0b2f75" />
+          <stop offset="100%" stopColor="#020a1c" />
+        </radialGradient>
+        <radialGradient id="planet-air" cx="50%" cy="50%" r="50%">
+          <stop offset="78%" stopColor={BLUE} stopOpacity={0} />
+          <stop offset="90%" stopColor={BLUE} stopOpacity={0.55} />
+          <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
+        </radialGradient>
+        <clipPath id="planet-clip">
+          <circle r={r} />
+        </clipPath>
+      </defs>
+      <g transform={`translate(${cx} ${cy})`}>
+        <circle r={r * 2.2} fill={BLUE} opacity={0.12 * shimmer} />
+        <g transform={`rotate(${tilt})`}>{ring("back")}</g>
+        <circle r={r} fill="url(#planet-body)" />
+        {/* Soft cloud bands, clipped to the sphere, drifting slowly. */}
+        <g clipPath="url(#planet-clip)" opacity={0.22}>
+          {[-0.45, -0.1, 0.3].map((y, i) => (
+            <ellipse key={i} cx={((frame * 0.6 + i * 40) % (r * 2)) - r} cy={y * r} rx={r * 1.1} ry={r * 0.09} fill={WHITE} />
+          ))}
+        </g>
+        {/* Night side. */}
+        <circle r={r} fill="url(#planet-shadow)" />
+        <radialGradient id="planet-shadow" cx="78%" cy="80%" r="70%">
+          <stop offset="0%" stopColor="#000" stopOpacity={0.55} />
+          <stop offset="100%" stopColor="#000" stopOpacity={0} />
+        </radialGradient>
+        <circle r={r * 1.14} fill="url(#planet-air)" />
+        <g transform={`rotate(${tilt})`}>{ring("front")}</g>
+      </g>
+    </svg>
+  );
+}
+
 function SourcesVisual() {
   const frame = useCurrentFrame();
   const kinds = ["Blog", "Newsletter", "Website", "Markdown", "PDF", "Substack", "Ghost", "WordPress"];
@@ -236,9 +297,9 @@ function SourcesVisual() {
       <svg width={900} height={660} style={{ position: "absolute", overflow: "visible" }}>
         <ellipse cx={cx} cy={cy} rx={330} ry={130} fill="none" stroke={`${BLUE}88`} strokeWidth={2} strokeDasharray="4 10" />
         <ellipse cx={cx} cy={cy} rx={220} ry={86} fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth={1.5} />
-        <circle cx={cx} cy={cy} r={74} fill="#000" stroke={BLUE} strokeWidth={3} style={{ filter: `drop-shadow(0 0 30px ${BLUE})` }} />
-        <circle cx={cx} cy={cy} r={40} fill={WHITE} opacity={0.9} style={{ filter: `drop-shadow(0 0 24px ${WHITE})` }} />
       </svg>
+      <Planet cx={cx} cy={cy} r={82} />
+
       {kinds.map((k, i) => {
         const arrive = interpolate(frame, [12 + i * 9, 50 + i * 9], [0, 1], { ...clamp, easing: ease });
         const ring = i % 2 ? 220 : 330;
@@ -545,10 +606,10 @@ function Intro() {
       </div>
       <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center", gap: 28 }}>
         <h1 style={{ margin: 0, fontFamily: theme.display, fontWeight: 600, fontSize: 80, color: WHITE, opacity: a, transform: `translateY(${(1 - a) * 30}px)` }}>
-          You have written more than you remember.
+          At the edge of something vast.
         </h1>
         <h2 style={{ margin: 0, fontFamily: theme.display, fontWeight: 500, fontSize: 64, color: "rgba(255,255,255,0.75)", opacity: b, transform: `translateY(${(1 - b) * 24}px)` }}>
-          Whole worlds of ideas, <span style={{ color: WHITE, textShadow: `0 0 30px ${BLUE}, 0 0 70px ${BLUE}` }}>still uncharted.</span>
+          Curious. <span style={{ color: WHITE, textShadow: `0 0 30px ${BLUE}, 0 0 70px ${BLUE}` }}>A little breathless.</span>
         </h2>
         <p style={{ margin: "30px 0 0", fontFamily: theme.mono, fontSize: 24, letterSpacing: 8, color: BLUE, opacity: c }}>A JOURNEY OF KNOWLEDGE</p>
       </AbsoluteFill>
@@ -628,10 +689,9 @@ function Outro() {
         </div>
         <AbsoluteFill style={{ background: "radial-gradient(45% 45% at 50% 50%, rgba(0,0,0,0.55), transparent 80%)" }} />
         <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center" }}>
-          {/* The navbar mark (frontend/public/logo.svg, copied to public/logo.svg). */}
-          <Img src={staticFile("logo.svg")} width={144} height={144} style={{ borderRadius: 32, opacity: logo, transform: `scale(${logo})`, boxShadow: `0 0 90px ${BLUE}, 0 0 30px ${WHITE}` }} />          <h1 style={{ margin: "34px 0 0", fontFamily: theme.display, fontWeight: 700, fontSize: 150, lineHeight: 1, color: WHITE, opacity: name, transform: `translateY(${(1 - name) * 30}px)`, textShadow: `0 0 50px ${BLUE}` }}>
-            Notestack <span style={{ color: BLUE, textShadow: `0 0 30px ${BLUE}` }}>AI</span>
-          </h1>
+          <div style={{ opacity: Math.min(1, logo), transform: `scale(${0.85 + 0.15 * logo}) translateY(${(1 - name) * 20}px)` }}>
+            <Lockup size={176} suffix="AI" glow={1 + pulse * 0.3} />
+          </div>
           <div style={{ marginTop: 44, display: "flex", gap: 6 }}>
             {letters.map((ch, i) => {
               const s = spring({ frame: frame - S(3.2) - i * 2, fps: LAUNCH_FPS, config: { damping: 11 } });

renderer/src/compositions/Lockup.tsx

@@ -0,0 +1,23 @@
+import { Img, staticFile } from "remotion";
+import { theme } from "../theme";
+
+/** The navbar logo: the mark (public/logo.svg, copied from frontend/public/logo.svg) with the
+ * "Notestack" wordmark beside it, in the same proportions as the site (32 px mark, 10 px gap,
+ * Space Grotesk 600 at 18 px). `suffix` adds a word after it in blue, such as "AI". */
+export function Lockup({ size, suffix, glow = 1 }: { size: number; suffix?: string; glow?: number }) {
+  const text = (size * 18) / 32;
+  return (
+    <div style={{ display: "inline-flex", alignItems: "center", gap: (size * 10) / 32 }}>
+      <Img
+        src={staticFile("logo.svg")}
+        width={size}
+        height={size}
+        style={{ borderRadius: (size * 9) / 32, boxShadow: `0 0 ${size * 0.6 * glow}px ${theme.blue}, 0 0 ${size * 0.2 * glow}px ${theme.white}` }}
+      />
+      <span style={{ fontFamily: theme.display, fontWeight: 600, fontSize: text, letterSpacing: "0.01em", lineHeight: 1, color: theme.white, textShadow: glow ? `0 0 ${text * 0.5 * glow}px ${theme.blue}` : undefined }}>
+        Notestack
+        {suffix && <span style={{ color: theme.blue, marginLeft: text * 0.28 }}>{suffix}</span>}
+      </span>
+    </div>
+  );
+}

renderer/src/compositions/demoVo.ts

@@ -0,0 +1,2 @@
+// Generated by scripts/make_demo_vo.py: narration clip lengths in seconds. Do not edit by hand.
+export const DEMO_VO_SECONDS = {"warp": 3.92, "paste": 6.95, "orbit": 6.61, "research": 3.74, "audio": 2.67, "launchkit": 3.32, "launchpad": 4.05, "outro": 2.48} as const;

renderer/src/compositions/launchTimeline.ts

@@ -1,20 +1,20 @@
 // Generated by make_launch_music.py from public/launch-vo/durations.json. Do not edit by hand.
 // 120 bpm; every scene starts on a bar line so cuts land on the beat.
 export const LAUNCH_BPM = 120;
-export const LAUNCH_SECONDS = 84.0;
+export const LAUNCH_SECONDS = 82.0;
 export const LAUNCH_SCENES = [
-  { id: "intro", start: 0.0, len: 8.0, vo: 1.0, voLen: 5.78 },
-  { id: "launch", start: 8.0, len: 4.0, vo: 0.35, voLen: 3.03 },
-  { id: "sources", start: 12.0, len: 8.0, vo: 0.35, voLen: 6.14 },
+  { id: "intro", start: 0.0, len: 8.0, vo: 1.0, voLen: 5.83 },
+  { id: "launch", start: 8.0, len: 4.0, vo: 0.35, voLen: 2.9 },
+  { id: "sources", start: 12.0, len: 8.0, vo: 0.35, voLen: 6.38 },
   { id: "research", start: 20.0, len: 6.0, vo: 0.35, voLen: 4.16 },
-  { id: "map", start: 26.0, len: 8.0, vo: 0.35, voLen: 6.12 },
-  { id: "voice", start: 34.0, len: 6.0, vo: 0.35, voLen: 4.57 },
-  { id: "audio", start: 40.0, len: 6.0, vo: 0.35, voLen: 3.69 },
-  { id: "video", start: 46.0, len: 6.0, vo: 0.35, voLen: 4.44 },
-  { id: "launchkit", start: 52.0, len: 6.0, vo: 0.35, voLen: 4.7 },
-  { id: "launchpad", start: 58.0, len: 6.0, vo: 0.35, voLen: 3.32 },
-  { id: "resurface", start: 64.0, len: 6.0, vo: 0.35, voLen: 4.23 },
-  { id: "montage", start: 70.0, len: 4.0, vo: null, voLen: null },
-  { id: "outro", start: 74.0, len: 10.0, vo: 1.2, voLen: 5.17 },
+  { id: "map", start: 26.0, len: 6.0, vo: 0.35, voLen: 4.47 },
+  { id: "voice", start: 32.0, len: 6.0, vo: 0.35, voLen: 3.56 },
+  { id: "audio", start: 38.0, len: 4.0, vo: 0.35, voLen: 3.19 },
+  { id: "video", start: 42.0, len: 8.0, vo: 0.35, voLen: 5.88 },
+  { id: "launchkit", start: 50.0, len: 6.0, vo: 0.35, voLen: 3.69 },
+  { id: "launchpad", start: 56.0, len: 6.0, vo: 0.35, voLen: 4.94 },
+  { id: "resurface", start: 62.0, len: 6.0, vo: 0.35, voLen: 4.44 },
+  { id: "montage", start: 68.0, len: 4.0, vo: null, voLen: null },
+  { id: "outro", start: 72.0, len: 10.0, vo: 1.2, voLen: 6.3 },
 ] as const;
 export type LaunchSceneId = (typeof LAUNCH_SCENES)[number]["id"];