Pricing Page

<script setup lang="ts">
import { ref } from 'vue'
import BillingToggle from './components/BillingToggle.vue'
import TierCards from './components/TierCards.vue'
import ComparisonTable from './components/ComparisonTable.vue'
import PricingFaq from './components/PricingFaq.vue'
import EnterpriseCta from './components/EnterpriseCta.vue'
import type { Billing, Tier } from './data'

const billing = ref<Billing>('yearly')
const selected = ref('')

function onSelect(tier: Tier) {
  selected.value = `${tier.name} plan selected, billed ${billing.value}. Wire this to your checkout.`
}
</script>

<template>
  <div class="min-h-screen bg-white text-gray-900 antialiased dark:bg-gray-950 dark:text-white">
    <header class="border-b border-gray-200 dark:border-white/10">
      <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <a href="#" class="flex items-center gap-2 rounded-lg font-semibold focus-visible:outline-2 focus-visible:outline-teal-600">
          <span class="grid size-8 place-items-center rounded-lg bg-teal-600 text-white" aria-hidden="true">
            <svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 3v13M8 20h8M12 16l-3 4M12 16l3 4" /></svg>
          </span>
          Plumbline
        </a>
        <nav aria-label="Main" class="flex items-center gap-1 text-sm font-medium">
          <a href="#" class="hidden rounded-lg px-3 py-2 text-gray-600 hover:text-gray-900 sm:block dark:text-gray-300 dark:hover:text-white">Product</a>
          <a href="#" aria-current="page" class="hidden rounded-lg px-3 py-2 text-gray-900 sm:block dark:text-white">Pricing</a>
          <a href="#" class="rounded-lg px-3 py-2 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Sign in</a>
          <a href="#" class="ml-1 rounded-lg bg-teal-600 px-3.5 py-2 font-semibold text-white hover:bg-teal-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Try free</a>
        </nav>
      </div>
    </header>

    <main>
      <section class="relative isolate px-4 pb-16 pt-16 sm:px-6 sm:pt-24 lg:px-8" aria-labelledby="pricing-title">
        <div aria-hidden="true" class="absolute inset-x-0 top-0 -z-10 h-80 bg-gradient-to-b from-teal-50 to-transparent dark:from-teal-500/10" />
        <div class="mx-auto max-w-2xl text-center">
          <h1 id="pricing-title" class="text-4xl font-bold tracking-tight text-balance sm:text-5xl">Simple pricing, based on traffic</h1>
          <p class="mt-5 text-lg text-pretty text-gray-600 dark:text-gray-400">Every plan includes cookie-free tracking, EU hosting and all core reports. Pay only for the pageviews you need.</p>
          <div class="mt-9 flex justify-center">
            <BillingToggle v-model="billing" />
          </div>
        </div>
        <div class="mx-auto mt-12 max-w-7xl">
          <TierCards :billing="billing" @select="onSelect" />
          <p class="mt-6 min-h-5 text-center text-sm text-teal-700 dark:text-teal-300" aria-live="polite">{{ selected }}</p>
        </div>
      </section>

      <section class="px-4 py-16 sm:px-6 lg:px-8" aria-labelledby="compare-title">
        <div class="mx-auto max-w-7xl">
          <div class="max-w-2xl">
            <h2 id="compare-title" class="text-3xl font-bold tracking-tight">Compare every feature</h2>
            <p class="mt-3 text-gray-600 dark:text-gray-400">The full list, so there are no surprises after you sign up.</p>
          </div>
          <div class="mt-10">
            <ComparisonTable />
          </div>
        </div>
      </section>

      <section class="px-4 py-16 sm:px-6 lg:px-8" aria-label="Enterprise">
        <div class="mx-auto max-w-7xl">
          <EnterpriseCta />
        </div>
      </section>

      <section class="px-4 pb-24 pt-8 sm:px-6 lg:px-8" aria-labelledby="faq-title">
        <div class="mx-auto max-w-5xl">
          <h2 id="faq-title" class="text-center text-3xl font-bold tracking-tight">Frequently asked questions</h2>
          <p class="mt-3 text-center text-gray-600 dark:text-gray-400">
            Still unsure? <a href="#" class="font-semibold text-teal-700 underline-offset-4 hover:underline dark:text-teal-400">Email our team</a>, a human replies.
          </p>
          <div class="mt-10">
            <PricingFaq />
          </div>
        </div>
      </section>
    </main>

    <footer class="border-t border-gray-200 py-8 text-center text-sm text-gray-500 dark:border-white/10 dark:text-gray-400">
      Prices in USD, excluding VAT. © {{ new Date().getFullYear() }} Plumbline Analytics, a fictional company.
    </footer>
  </div>
</template>

<script setup lang="ts">
import type { Billing } from '../data'

const billing = defineModel<Billing>({ required: true })

function onKeydown(e: KeyboardEvent) {
  if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return
  e.preventDefault()
  billing.value = billing.value === 'monthly' ? 'yearly' : 'monthly'
  const group = e.currentTarget as HTMLElement
  requestAnimationFrame(() => group.querySelector<HTMLElement>('[aria-checked="true"]')?.focus())
}
</script>

<template>
  <div
    role="radiogroup"
    aria-label="Billing period"
    class="relative grid grid-cols-2 rounded-full bg-gray-100 p-1 text-sm font-semibold ring-1 ring-gray-200 dark:bg-white/5 dark:ring-white/10"
    @keydown="onKeydown"
  >
    <!-- sliding thumb -->
    <span
      aria-hidden="true"
      class="absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none dark:bg-teal-500"
      :class="billing === 'yearly' ? 'translate-x-full' : ''"
    />
    <button
      v-for="o in (['monthly', 'yearly'] as const)"
      :key="o"
      type="button"
      role="radio"
      :aria-checked="billing === o"
      :tabindex="billing === o ? 0 : -1"
      class="relative z-10 rounded-full px-5 py-2 transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600"
      :class="billing === o ? 'text-gray-900 dark:text-gray-950' : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white'"
      @click="billing = o"
    >
      {{ o === 'monthly' ? 'Monthly' : 'Yearly' }}
      <span v-if="o === 'yearly'" class="ml-1 text-xs font-bold text-teal-600" :class="billing === 'yearly' ? 'dark:text-gray-950' : 'dark:text-teal-400'">−20%</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { comparison, tiers, type Cell } from '../data'

// On small screens the table shows one plan at a time, chosen with tabs.
const active = ref(tiers.find((t) => t.featured)?.id ?? tiers[0]!.id)
const activeTier = computed(() => tiers.find((t) => t.id === active.value)!)

function onTabKey(e: KeyboardEvent) {
  const i = tiers.findIndex((t) => t.id === active.value)
  let next = i
  if (e.key === 'ArrowRight') next = (i + 1) % tiers.length
  else if (e.key === 'ArrowLeft') next = (i - 1 + tiers.length) % tiers.length
  else if (e.key === 'Home') next = 0
  else if (e.key === 'End') next = tiers.length - 1
  else return
  e.preventDefault()
  active.value = tiers[next]!.id
  document.getElementById(`cmp-tab-${active.value}`)?.focus()
}

const isBool = (c: Cell): c is boolean => typeof c === 'boolean'
</script>

<template>
  <div>
    <!-- Mobile: tabs + single column -->
    <div class="lg:hidden">
      <div role="tablist" aria-label="Choose a plan to compare" class="grid grid-cols-4 gap-1 rounded-xl bg-gray-100 p-1 dark:bg-white/5" @keydown="onTabKey">
        <button
          v-for="t in tiers"
          :id="`cmp-tab-${t.id}`"
          :key="t.id"
          type="button"
          role="tab"
          :aria-selected="active === t.id"
          aria-controls="cmp-panel"
          :tabindex="active === t.id ? 0 : -1"
          class="rounded-lg px-2 py-2 text-xs font-semibold transition focus-visible:outline-2 focus-visible:outline-teal-600"
          :class="active === t.id ? 'bg-white text-gray-900 shadow-sm dark:bg-teal-500 dark:text-gray-950' : 'text-gray-600 dark:text-gray-400'"
          @click="active = t.id"
        >{{ t.name }}</button>
      </div>
      <div id="cmp-panel" role="tabpanel" :aria-labelledby="`cmp-tab-${active}`" class="mt-6 space-y-8">
        <section v-for="g in comparison" :key="g.group">
          <h3 class="text-sm font-semibold text-teal-700 dark:text-teal-400">{{ g.group }}</h3>
          <dl class="mt-2 divide-y divide-gray-200 border-y border-gray-200 dark:divide-white/10 dark:border-white/10">
            <div v-for="row in g.rows" :key="row.name" class="flex items-center justify-between gap-4 py-3 text-sm">
              <dt class="text-gray-700 dark:text-gray-300">{{ row.name }}</dt>
              <dd class="text-right font-medium text-gray-900 dark:text-white">
                <template v-if="isBool(row.values[activeTier.id] ?? false)">
                  <svg v-if="row.values[activeTier.id]" viewBox="0 0 20 20" class="size-5 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-label="Included" role="img"><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>
                  <svg v-else viewBox="0 0 20 20" class="size-5 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-label="Not included" role="img"><path d="M6 10h8" /></svg>
                </template>
                <template v-else>{{ row.values[activeTier.id] }}</template>
              </dd>
            </div>
          </dl>
        </section>
      </div>
    </div>

    <!-- Desktop: full table -->
    <div class="hidden lg:block">
      <table class="w-full table-fixed border-separate border-spacing-0 text-left text-sm">
        <caption class="sr-only">Feature comparison across all plans</caption>
        <colgroup>
          <col class="w-[28%]">
          <col v-for="t in tiers" :key="t.id" :class="t.featured ? 'bg-teal-50/60 dark:bg-teal-500/[0.06]' : ''">
        </colgroup>
        <thead>
          <tr>
            <td class="sticky top-0 z-10 bg-white/90 pb-4 backdrop-blur dark:bg-gray-950/90" />
            <th
              v-for="t in tiers"
              :key="t.id"
              scope="col"
              class="sticky top-0 z-10 bg-white/90 px-4 pb-4 pt-4 backdrop-blur dark:bg-gray-950/90"
            >
              <span class="block text-base font-semibold text-gray-900 dark:text-white">{{ t.name }}</span>
              <span class="mt-0.5 block text-xs font-normal text-gray-500 dark:text-gray-400">{{ t.monthly === 0 ? 'Free' : `from $${t.yearly}/mo` }}</span>
            </th>
          </tr>
        </thead>
        <tbody v-for="g in comparison" :key="g.group">
          <tr>
            <th colspan="5" scope="colgroup" class="border-b border-gray-200 pb-3 pt-10 text-sm font-semibold text-teal-700 dark:border-white/10 dark:text-teal-400">{{ g.group }}</th>
          </tr>
          <tr v-for="row in g.rows" :key="row.name">
            <th scope="row" class="border-b border-gray-100 py-3.5 pr-4 font-normal text-gray-700 dark:border-white/5 dark:text-gray-300">
              {{ row.name }}
              <span v-if="row.hint" class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">{{ row.hint }}</span>
            </th>
            <td v-for="t in tiers" :key="t.id" class="border-b border-gray-100 px-4 py-3.5 text-center text-gray-900 dark:border-white/5 dark:text-white">
              <template v-if="isBool(row.values[t.id] ?? false)">
                <svg v-if="row.values[t.id]" viewBox="0 0 20 20" class="mx-auto size-5 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" role="img" :aria-label="`Included in ${t.name}`"><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>
                <svg v-else viewBox="0 0 20 20" class="mx-auto size-5 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" role="img" :aria-label="`Not included in ${t.name}`"><path d="M6 10h8" /></svg>
              </template>
              <span v-else class="font-medium">{{ row.values[t.id] }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<template>
  <div class="relative isolate overflow-hidden rounded-3xl bg-gray-900 px-6 py-10 sm:px-10 lg:flex lg:items-center lg:justify-between lg:gap-12 lg:px-14 lg:py-14 dark:bg-white/[0.04] dark:ring-1 dark:ring-white/10">
    <svg aria-hidden="true" class="absolute -right-10 -top-10 -z-10 size-72 text-teal-500/20" viewBox="0 0 200 200" fill="none" stroke="currentColor" stroke-width="1.5">
      <circle v-for="r in [20, 40, 60, 80, 100]" :key="r" cx="100" cy="100" :r="r" />
    </svg>
    <div class="max-w-xl">
      <p class="text-sm font-semibold text-teal-400">Enterprise</p>
      <h2 class="mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl">Over 10 million pageviews, or need a contract?</h2>
      <p class="mt-3 text-gray-300">Custom volume pricing, a signed DPA, invoicing, dedicated infrastructure and an uptime SLA. We usually reply within one business day.</p>
      <ul class="mt-6 grid gap-2 text-sm text-gray-200 sm:grid-cols-2">
        <li v-for="i in ['Volume discounts', 'SAML SSO and SCIM', '99.99% uptime SLA', 'Security review support']" :key="i" class="flex items-center gap-2">
          <svg viewBox="0 0 20 20" class="size-4 text-teal-400" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>{{ i }}
        </li>
      </ul>
    </div>
    <div class="mt-8 flex shrink-0 flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-col">
      <a href="#" class="rounded-xl bg-teal-400 px-6 py-3 text-center text-sm font-semibold text-teal-950 transition hover:bg-teal-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-400">Talk to sales</a>
      <a href="#" class="rounded-xl px-6 py-3 text-center text-sm font-semibold text-white ring-1 ring-white/20 transition hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download security overview</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { faqs } from '../data'
</script>

<template>
  <!-- Native <details> gives keyboard and screen reader support for free. -->
  <div class="grid items-start gap-x-8 gap-y-4 md:grid-cols-2">
    <details
      v-for="(f, i) in faqs"
      :key="f.q"
      class="group rounded-2xl border border-gray-200 bg-white px-5 open:shadow-sm dark:border-white/10 dark:bg-white/[0.03]"
      :open="i === 0"
    >
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4 font-semibold text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 dark:text-white [&::-webkit-details-marker]:hidden">
        {{ f.q }}
        <svg viewBox="0 0 20 20" class="size-5 shrink-0 text-gray-400 transition group-open:rotate-180 group-open:text-teal-600 dark:group-open:text-teal-400" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 8l5 5 5-5" /></svg>
      </summary>
      <p class="pb-5 text-sm leading-6 text-gray-600 dark:text-gray-400">{{ f.a }}</p>
    </details>
  </div>
</template>

<script setup lang="ts">
import { tiers, type Billing, type Tier } from '../data'

defineProps<{ billing: Billing }>()
defineEmits<{ select: [tier: Tier] }>()
</script>

<template>
  <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
    <article
      v-for="tier in tiers"
      :key="tier.id"
      class="relative flex flex-col rounded-3xl p-6"
      :class="tier.featured
        ? 'bg-teal-900 text-white shadow-xl shadow-teal-900/20 ring-2 ring-teal-500 dark:bg-teal-950 dark:ring-teal-400'
        : 'bg-white ring-1 ring-gray-200 dark:bg-white/[0.03] dark:ring-white/10'"
      :aria-labelledby="`tier-${tier.id}`"
    >
      <div class="flex items-center justify-between">
        <h3 :id="`tier-${tier.id}`" class="text-lg font-semibold">{{ tier.name }}</h3>
        <span v-if="tier.featured" class="rounded-full bg-teal-400 px-2.5 py-1 text-xs font-bold text-teal-950">Best value</span>
      </div>
      <p class="mt-2 text-sm" :class="tier.featured ? 'text-teal-100' : 'text-gray-600 dark:text-gray-400'">{{ tier.tagline }}</p>

      <p class="mt-6 flex items-baseline gap-1">
        <span class="text-4xl font-bold tracking-tight">${{ billing === 'monthly' ? tier.monthly : tier.yearly }}</span>
        <span class="text-sm" :class="tier.featured ? 'text-teal-200' : 'text-gray-500 dark:text-gray-400'">/ month</span>
      </p>
      <p class="mt-1 h-5 text-xs" :class="tier.featured ? 'text-teal-200' : 'text-gray-500 dark:text-gray-400'">
        <template v-if="tier.monthly === 0">Free forever</template>
        <template v-else-if="billing === 'yearly'">${{ tier.yearly * 12 }} billed yearly</template>
        <template v-else>Billed monthly</template>
      </p>

      <p class="mt-5 rounded-lg px-3 py-2 text-sm font-medium" :class="tier.featured ? 'bg-white/10 text-white' : 'bg-teal-50 text-teal-800 dark:bg-teal-500/10 dark:text-teal-200'">
        {{ tier.limit }}
      </p>

      <ul class="mt-5 flex-1 space-y-2.5 text-sm" :class="tier.featured ? 'text-teal-50' : 'text-gray-700 dark:text-gray-300'">
        <li v-for="h in tier.highlights" :key="h" class="flex gap-2.5">
          <svg viewBox="0 0 20 20" class="mt-0.5 size-4 shrink-0" :class="tier.featured ? 'text-teal-300' : 'text-teal-600 dark:text-teal-400'" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>
          {{ h }}
        </li>
      </ul>

      <button
        type="button"
        class="mt-7 rounded-xl px-4 py-2.5 text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
        :class="tier.featured
          ? 'bg-teal-400 text-teal-950 hover:bg-teal-300'
          : 'bg-gray-900 text-white hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200'"
        @click="$emit('select', tier)"
      >{{ tier.cta }}</button>
    </article>
  </div>
</template>

// Pricing content for Plumbline, a fictional privacy-first web analytics product.
export type Billing = 'monthly' | 'yearly'

export interface Tier {
  id: string
  name: string
  tagline: string
  /** Price per month when billed monthly. */
  monthly: number
  /** Price per month when billed yearly. */
  yearly: number
  limit: string
  cta: string
  featured?: boolean
  highlights: string[]
}

export const tiers: Tier[] = [
  {
    id: 'hobby', name: 'Hobby', tagline: 'For personal sites and side projects.', monthly: 0, yearly: 0, limit: '10k pageviews / mo', cta: 'Start free',
    highlights: ['1 website', '30-day data retention', 'Core dashboard', 'Community support'],
  },
  {
    id: 'starter', name: 'Starter', tagline: 'For small businesses getting serious.', monthly: 9, yearly: 7, limit: '100k pageviews / mo', cta: 'Start 30-day trial',
    highlights: ['Up to 5 websites', '2-year data retention', 'Goals and events', 'Email reports'],
  },
  {
    id: 'growth', name: 'Growth', tagline: 'For teams who live in their numbers.', monthly: 29, yearly: 24, limit: '1M pageviews / mo', cta: 'Start 30-day trial', featured: true,
    highlights: ['Unlimited websites', 'Unlimited retention', 'Funnels and revenue', 'Team members and roles'],
  },
  {
    id: 'scale', name: 'Scale', tagline: 'For high-traffic sites and agencies.', monthly: 79, yearly: 65, limit: '10M pageviews / mo', cta: 'Start 30-day trial',
    highlights: ['Everything in Growth', 'Raw data export', 'Client dashboards', 'Priority support'],
  },
]

/** `true` = included, `false` = not included, string = specific value. */
export type Cell = boolean | string

export interface FeatureRow {
  name: string
  hint?: string
  values: Record<string, Cell>
}

export const comparison: { group: string; rows: FeatureRow[] }[] = [
  {
    group: 'Usage',
    rows: [
      { name: 'Monthly pageviews', values: { hobby: '10k', starter: '100k', growth: '1M', scale: '10M' } },
      { name: 'Websites', values: { hobby: '1', starter: '5', growth: 'Unlimited', scale: 'Unlimited' } },
      { name: 'Data retention', values: { hobby: '30 days', starter: '2 years', growth: 'Unlimited', scale: 'Unlimited' } },
      { name: 'Team members', values: { hobby: '1', starter: '3', growth: '10', scale: 'Unlimited' } },
    ],
  },
  {
    group: 'Analytics',
    rows: [
      { name: 'Real-time dashboard', values: { hobby: true, starter: true, growth: true, scale: true } },
      { name: 'Custom events and goals', values: { hobby: false, starter: true, growth: true, scale: true } },
      { name: 'Funnels', values: { hobby: false, starter: false, growth: true, scale: true } },
      { name: 'Revenue attribution', values: { hobby: false, starter: false, growth: true, scale: true } },
      { name: 'Raw data export', hint: 'Daily CSV or Parquet to your own bucket', values: { hobby: false, starter: false, growth: false, scale: true } },
    ],
  },
  {
    group: 'Privacy and security',
    rows: [
      { name: 'Cookie-free tracking', values: { hobby: true, starter: true, growth: true, scale: true } },
      { name: 'EU data residency', values: { hobby: true, starter: true, growth: true, scale: true } },
      { name: 'Two-factor authentication', values: { hobby: true, starter: true, growth: true, scale: true } },
      { name: 'SSO', values: { hobby: false, starter: false, growth: false, scale: true } },
    ],
  },
  {
    group: 'Support',
    rows: [
      { name: 'Help centre and community', values: { hobby: true, starter: true, growth: true, scale: true } },
      { name: 'Email support', values: { hobby: false, starter: '48h', growth: '24h', scale: '4h' } },
      { name: 'Onboarding call', values: { hobby: false, starter: false, growth: true, scale: true } },
    ],
  },
]

export const faqs = [
  { q: 'What counts as a pageview?', a: 'A pageview is recorded each time a page on your site loads, including route changes in single-page apps. Custom events do not count towards your limit.' },
  { q: 'What happens if I go over my limit?', a: 'Nothing breaks. We keep counting and email you. If you stay over for two months in a row we will suggest the next plan; we never charge overages without asking.' },
  { q: 'Can I change plans later?', a: 'Yes, upgrade or downgrade whenever you like. Changes are prorated to the day, and your data stays exactly where it is.' },
  { q: 'Do you offer discounts?', a: 'Yearly billing saves about 20%. Registered non-profits and open source projects get 50% off any paid plan.' },
  { q: 'Is there a free trial?', a: 'Every paid plan starts with a 30-day trial with no card required. At the end you choose a plan or drop to Hobby automatically.' },
  { q: 'Where is my data stored?', a: 'On servers we operate in the EU. We do not use cookies, do not store IP addresses and never sell or share visitor data.' },
]