Billing FAQ with plan recap

Design a billing help section with Tailwind CSS in two columns from lg. The narrow left column is a sticky card summarising the current plan: a plan name with a pill, the monthly figure, three detail rows for seats, next invoice and payment method with muted labels, a full-width outline button reading "Manage billing" and a small link to download invoices. The wide right column is a heading followed by two labelled groups of questions — Payments and Cancellation — each rendered as details elements with a chevron that rotates when open, hairline dividers instead of card borders, and answers in relaxed grey prose. One answer should contain a small bordered table of three rows showing when charges land for monthly, annual and usage plans. Stack to one column below lg with the plan card first.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-[300px_1fr] lg:gap-16">
    <aside class="lg:sticky lg:top-24 lg:self-start">
      <div class="rounded-2xl border border-neutral-200 bg-white p-6">
        <div class="flex items-center gap-2">
          <p class="text-sm font-semibold text-neutral-900">Team</p>
          <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Active</span>
        </div>
        <p class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">$59<span class="text-sm font-normal text-neutral-400">/mo</span></p>

        <dl class="mt-6 space-y-3 border-t border-neutral-200 pt-5 text-sm">
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Seats</dt><dd class="font-medium text-neutral-900">12 of 25</dd></div>
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Next invoice</dt><dd class="font-medium text-neutral-900">14 Sep 2026</dd></div>
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Payment</dt><dd class="font-mono text-xs text-neutral-900">Visa ·· 4411</dd></div>
        </dl>

        <button class="mt-6 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Manage billing</button>
        <a href="#" class="mt-3 block text-center text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Download past invoices</a>
      </div>
    </aside>

    <div>
      <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">Billing questions</h2>
      <p class="mt-3 text-neutral-500">If something here does not match your invoice, reply to it and a human will look.</p>

      <p class="mt-10 text-xs font-semibold uppercase tracking-widest text-neutral-400">Payments</p>
      <div class="mt-3 divide-y divide-neutral-200 border-y border-neutral-200">
        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
            <span class="text-sm font-medium text-neutral-900">When is my card actually charged?</span>
            <span class="text-neutral-400 transition-transform group-open:rotate-180"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m7 10 5 5 5-5"/></svg></span>
          </summary>
          <div class="mt-3 text-sm leading-relaxed text-neutral-500">
            <p>It depends on the plan shape. Charges are attempted at 09:00 UTC and retried twice over four days if they fail.</p>
            <table class="mt-4 w-full overflow-hidden rounded-lg border border-neutral-200 text-xs">
              <tbody class="divide-y divide-neutral-200">
                <tr><td class="px-3 py-2 font-medium text-neutral-900">Monthly</td><td class="px-3 py-2 text-neutral-500">Same date each month, in advance</td></tr>
                <tr><td class="px-3 py-2 font-medium text-neutral-900">Annual</td><td class="px-3 py-2 text-neutral-500">On the anniversary, in advance</td></tr>
                <tr><td class="px-3 py-2 font-medium text-neutral-900">Usage</td><td class="px-3 py-2 text-neutral-500">First working day of the following month</td></tr>
              </tbody>
            </table>
          </div>
        </details>

        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
            <span class="text-sm font-medium text-neutral-900">Can we pay by invoice and bank transfer?</span>
            <span class="text-neutral-400 transition-transform group-open:rotate-180"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m7 10 5 5 5-5"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-relaxed text-neutral-500">From $5,000 annually, yes — net 30 as standard and net 60 on request. Below that we only take cards, because chasing small invoices costs more than the invoices.</p>
        </details>

        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
            <span class="text-sm font-medium text-neutral-900">Do you charge VAT?</span>
            <span class="text-neutral-400 transition-transform group-open:rotate-180"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m7 10 5 5 5-5"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-relaxed text-neutral-500">We charge VAT where required. Add a valid EU VAT number in billing settings and the reverse charge is applied to the next invoice automatically.</p>
        </details>
      </div>

      <p class="mt-10 text-xs font-semibold uppercase tracking-widest text-neutral-400">Cancellation</p>
      <div class="mt-3 divide-y divide-neutral-200 border-y border-neutral-200">
        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
            <span class="text-sm font-medium text-neutral-900">What happens to our data if we cancel?</span>
            <span class="text-neutral-400 transition-transform group-open:rotate-180"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m7 10 5 5 5-5"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-relaxed text-neutral-500">The workspace goes read-only at the end of the paid period and stays that way for 60 days, so exports still work. After that it is deleted, including backups, within a further 30 days.</p>
        </details>

        <details class="group py-4">
          <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
            <span class="text-sm font-medium text-neutral-900">Do you give refunds?</span>
            <span class="text-neutral-400 transition-transform group-open:rotate-180"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m7 10 5 5 5-5"/></svg></span>
          </summary>
          <p class="mt-3 text-sm leading-relaxed text-neutral-500">On annual plans, pro rata for whole unused months. On monthly plans we do not, but you can cancel any time and keep access until the period ends.</p>
        </details>
      </div>
    </div>
  </div>
</section>