feat(billing): let people try the product before handing over a card

The trial now starts inside the product, at email verification, and Stripe
grants none at all: checkout creates a subscription that bills immediately.
Verifying an address is what buys the seven days, which is also the cheapest
abuse control there is.

An unexpired trial is treated as an entitlement the account already holds, so a
Stripe sync can add access but never retracts a trial that has not run out. That
matters most for the abandoned checkout: the resulting incomplete subscription
carries no trial_end, and writing it through would have erased the days the
account still had and locked it out.

Unpaid accounts are bounded by what they can cost us rather than by what they
can do: one workspace, one project, 3 GiB of direct uploads. YouTube imports,
share links, guests, comments and approvals stay unlimited, because those are
the parts worth trying and they cost nothing. isPaidTier() is the new seam;
hasBillingAccess() answers a different question now that access no longer
implies a card.

Signup CTAs, the pricing card, the comparison pages, the terms and the refund
policy all said the trial converts to a paid plan by itself. It no longer does,
so they say what happens instead. Settings and a banner name both dates that
matter: when the trial ends, and the fifteen days after that during which
nothing is deleted.

/admin/growth compares the two funnels on signup to paid within a fixed 30 day
window, not trial to paid. Dropping the card requirement multiplies trials, so
the old ratio can fall while more people actually pay, and reading it that way
would retire the change for the wrong reason.

components/LandingPage.tsx

@@ -263,12 +263,12 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
                 href={hostedCtaHref}
                 className="group relative isolate inline-flex h-12 min-w-max items-center justify-center overflow-hidden border border-primary bg-primary px-10 text-sm font-medium whitespace-nowrap text-primary-foreground transition-transform duration-300 hover:scale-[1.02]"
               >
-                Start free trial
+                Start 7-day free trial, no card required
                 <MoveRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
               </CtaLink>
 
               <p className="text-xs text-muted-foreground">
-                7-day free trial · Flat $10/mo — no per-seat fees · No client accounts
+                No credit card · Flat $10/mo after, no per-seat fees · No client accounts
               </p>
 
               <a
@@ -677,7 +677,7 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
                   <span className="text-[#06b6d4]">/ month</span>
                 </div>
                 <p className="mb-6 text-sm text-muted-foreground">
-                  Starts with a 7-day free trial. Cancel anytime.
+                  Starts with a 7-day free trial. No credit card. Cancel anytime.
                 </p>
 
                 <ul className="mb-8 flex-1 space-y-4 text-sm text-foreground/80">
@@ -855,7 +855,7 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
                   },
                   {
                     q: 'Is there a free trial?',
-                    a: 'Yes. Hosted Cloud starts with a 7-day free trial. After that it is a flat $10/mo — no per-seat or per-client fees.',
+                    a: 'Yes. Hosted Cloud starts with a 7-day free trial and never asks for a card to begin it. After that it is a flat $10/mo, with no per-seat or per-client fees.',
                   },
                   {
                     q: 'How is this different from sending a Google Drive link?',
@@ -906,7 +906,7 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
               href={hostedCtaHref}
               className="group relative isolate inline-flex h-12 min-w-max items-center justify-center overflow-hidden border border-primary bg-primary px-10 text-sm font-medium whitespace-nowrap text-primary-foreground transition-transform duration-300 hover:scale-[1.02] md:min-w-[240px]"
             >
-              Start free trial
+              Start 7-day free trial, no card required
             </CtaLink>
           </div>
         </section>

components/layout/index.ts

@@ -1 +1,2 @@
 export { Header } from './header';
+export { TrialBanner } from './trial-banner';

components/layout/trial-banner.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import type { TrialNotice } from '@/lib/billing';
+
+function formatDate(value: Date) {
+  return value.toLocaleDateString('en-US', { month: 'long', day: 'numeric' });
+}
+
+/**
+ * The trial deadline, said once at the top of the app.
+ *
+ * The `ended` case is the one that matters: access stops at the trial's end date
+ * but nothing is deleted for another fifteen days, and an account that is not
+ * told this reads a locked workspace as lost work. So the deletion date is
+ * stated as reassurance rather than as a threat.
+ */
+export function TrialBanner({ notice }: { notice: TrialNotice }) {
+  const isEnded = notice.kind === 'ended';
+
+  return (
+    <div
+      className={
+        isEnded
+          ? 'border-b border-amber-500/30 bg-amber-500/10 px-4 py-2 text-sm text-amber-800 dark:text-amber-300'
+          : 'border-b border-primary/30 bg-primary/5 px-4 py-2 text-sm text-foreground'
+      }
+    >
+      <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-2 gap-y-1">
+        <span>
+          {isEnded
+            ? `Your free trial ended on ${formatDate(notice.endsAt)}.`
+            : `Your free trial ends on ${formatDate(notice.endsAt)}.`}
+        </span>
+        {notice.contentKeptUntil ? (
+          <span className="text-muted-foreground">
+            Nothing has been deleted. Your projects and media are kept until{' '}
+            {formatDate(notice.contentKeptUntil)}.
+          </span>
+        ) : null}
+        <Link href="/settings" className="font-medium underline underline-offset-4">
+          {isEnded ? 'Subscribe to pick up where you left off' : 'See plan'}
+        </Link>
+      </div>
+    </div>
+  );
+}

components/marketing/comparison-page.tsx

@@ -46,7 +46,7 @@ export function ComparisonPage({ page, isLoggedIn }: ComparisonPageProps) {
                   href={hostedCtaHref}
                   className="group relative isolate inline-flex h-12 items-center justify-center overflow-hidden border border-primary bg-primary px-8 text-sm font-medium text-primary-foreground transition-transform duration-300 hover:scale-[1.02]"
                 >
-                  Start free trial
+                  Start 7-day free trial, no card required
                   <MoveRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                 </CtaLink>
                 <a
@@ -143,8 +143,9 @@ export function ComparisonPage({ page, isLoggedIn }: ComparisonPageProps) {
                 Pricing comparison
               </h2>
               <p className="mt-3 max-w-3xl text-sm text-muted-foreground md:text-base">
-                OpenFrame is $10/month flat with a 7-day free trial. You do not pay per team member,
-                collaborator, or guest reviewer. Self-hosting is free with Docker.
+                OpenFrame is $10/month flat with a 7-day free trial that never asks for a card. You
+                do not pay per team member, collaborator, or guest reviewer. Self-hosting is free
+                with Docker.
               </p>
             </div>
             <PricingComparison
@@ -204,7 +205,7 @@ export function ComparisonPage({ page, isLoggedIn }: ComparisonPageProps) {
                 href={hostedCtaHref}
                 className="inline-flex h-12 items-center justify-center border border-primary bg-primary px-8 text-sm font-medium text-primary-foreground"
               >
-                Start free trial
+                Start 7-day free trial, no card required
               </CtaLink>
               <a
                 href={seoConfig.githubUrl}