Call to action — dark inset card

// The card uses the neutral and brand ramps from the Taste preset so it
// stays dark in both light and dark mode.
const steps = [
  { title: "Add your business", body: "Logo, tax number and bank details. Two minutes." },
  { title: "Send an invoice", body: "Pick a client, add lines, press send. Done." },
  { title: "Get paid", body: "Clients pay in one tap, and reminders go out on their own." },
];

export function CtaDarkCard() {
  return (
    <section aria-labelledby="cta-dark-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="relative isolate mx-auto grid max-w-6xl gap-8 overflow-hidden rounded-xl border border-neutral-800 bg-neutral-950 px-7 py-9 text-neutral-50 lg:grid-cols-[1.1fr_1fr] lg:gap-14 lg:p-14">
        <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(55%_80%_at_0%_0%,var(--tst-brand-500),transparent_70%)] opacity-45" />
        <div className="grid content-center justify-items-start gap-5">
          <p className="text-[13px] font-medium text-brand-300">Ready when you are</p>
          <h2 id="cta-dark-title" className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">From sign-up to paid invoice in an afternoon</h2>
          <p className="text-base leading-relaxed text-neutral-400 sm:text-lg">No onboarding calls and no setup fee. Most people send their first invoice before they finish their coffee.</p>
          <div className="flex flex-wrap gap-2.5">
            <a href="/signup" className="inline-flex h-11 items-center rounded bg-neutral-50 px-5 text-[15px] font-medium text-neutral-950 transition hover:bg-neutral-200">Start free</a>
            <a href="/tour" className="inline-flex h-11 items-center rounded border border-neutral-700 px-5 text-[15px] font-medium text-neutral-50 transition hover:bg-neutral-800">Watch a 2-min tour</a>
          </div>
        </div>
        <ol className="divide-y divide-neutral-800">
          {steps.map((s, i) => (
            <li key={s.title} className="grid grid-cols-[36px_1fr] gap-3.5 py-[18px] first:pt-0 last:pb-0">
              <span className="grid size-9 place-items-center rounded-full border border-neutral-700 text-[13px] font-semibold tabular-nums text-neutral-200">{i + 1}</span>
              <div>
                <p className="text-[15px] font-semibold">{s.title}</p>
                <p className="mt-0.5 text-[13.5px] leading-relaxed text-neutral-400">{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}