@funnelsgrove/cli 0.1.14 → 0.1.18

package/template_scaffold/src/steps/step-32-paywall.tsx

@@ -0,0 +1,2253 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import {
+  checkoutRuntimeConfig,
+  resolveClaimbeeCheckoutMode,
+} from '@/runtime/checkout-runtime-config';
+import {
+  billingDiscountStorageKeys,
+  billingDiscounts,
+  claimbeePlansByMode,
+} from '@/config/billing.plans';
+import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
+import { useClaimbeeStepContent } from '@/steps/use-claimbee-step-content';
+import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
+import {
+  apiService,
+  collectCurrentFunnelAttribution,
+  readPaywallStateValue,
+  runtimePublicConfig,
+  updatePaywallStateValue,
+  useFunnel,
+  useRuntimeMode,
+  type FunnelStepMeta,
+} from '@funnelsgrove/runtime';
+import { getPathForStep } from '@/runtime/funnel-runtime';
+import {
+  ApplePaySubscriptionCheckoutSlot,
+  GooglePaySubscriptionCheckoutSlot,
+  SharedCheckoutSpecialOfferDialog,
+  SharedStripeCheckoutV2Dialog,
+  activateSecondPaywallDiscount,
+  advancePaywallDiscountState,
+  buildConfigPaywallPlans,
+  buildDiscountedPaywallPlans,
+  buildPaywallRenewalDisclaimer,
+  getDefaultPlanId,
+  getPaywallPromoDisplayName,
+  resolvePaywallDiscountState,
+  serializePaywallDiscountState,
+  usePlatformWalletPaymentMethods,
+  useStripeSubscriptionCheckoutSession,
+  type PaywallDiscountState,
+  type PlatformWalletPaymentMethod,
+} from '@funnelsgrove/payments';
+import { stepSubscriptionStartedId } from '@/steps/step-33-subscription-started';
+import { funnelManifest } from '@/config/funnel.manifest';
+
+export const stepPaywallId = 'paywall';
+
+export const stepPaywall = {
+  id: stepPaywallId,
+  name: 'paywall',
+  type: 'paywall_offer',
+  kind: 'paywall',
+  figmaNodeId: '6992-6210',
+  title: 'Paywall',
+  description: 'ClaimBee paywall rebuilt from Figma node 6992:6210 with a local three-plan catalog and FAQ accordion.',
+  actionBar: {
+    hidden: true,
+  },
+} as const satisfies FunnelStepMeta;
+
+type StoryOption = {
+  quote: string;
+  author: string;
+  backgroundColor: string;
+};
+
+type PaywallWalletAvailabilityState = {
+  intentKey: string;
+  methods: Partial<Record<PlatformWalletPaymentMethod, boolean>>;
+};
+
+const claimbeeStoryBackgroundColors = ['var(--color-secondary-text)', 'var(--color-primary)', 'var(--color-secondary)'] as const;
+const paywallFeatureTileColorClassNames = [
+  'paywall-v2-feature-title--orange',
+  'paywall-v2-feature-title--orange',
+  'paywall-v2-feature-title--green',
+  'paywall-v2-feature-title--green',
+] as const;
+const paywallDetailImageDimensions = {
+  tracking: {
+    width: 172,
+    height: 70,
+  },
+  alerts: {
+    width: 127,
+    height: 108,
+  },
+} as const;
+const defaultSelectedPlan = 'secondary';
+const CLAIMBEE_PAYWALL_SECOND_COUPON_ID = billingDiscounts.second.couponId;
+export const CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS = billingDiscountStorageKeys;
+const deferPaywallStateSync = (syncState: () => void): (() => void) => {
+  const timeoutId = window.setTimeout(syncState, 0);
+  return () => window.clearTimeout(timeoutId);
+};
+const checkoutCurrencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+function formatCheckoutAmount(amountCents: number): string {
+  return checkoutCurrencyFormatter.format(amountCents / 100);
+}
+
+type StepPaywallProps = {
+  analyticsStepId?: string;
+  analyticsStepName?: string;
+};
+
+export function StepPaywall({
+  analyticsStepId = stepPaywallId,
+  analyticsStepName = stepPaywall.name || stepPaywall.title,
+}: StepPaywallProps = {}) {
+  const [runtimeMode] = useRuntimeMode();
+  const checkoutMode = useMemo(
+    () => resolveClaimbeeCheckoutMode(runtimeMode),
+    [runtimeMode],
+  );
+  const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();
+  const content = useClaimbeeStepContent(stepPaywallId, stepPaywallContent);
+  const supportEmail = runtimePublicConfig.supportEmail;
+  const walletPaymentMethods = usePlatformWalletPaymentMethods();
+  const availablePlans = useMemo(
+    () =>
+      buildConfigPaywallPlans(
+        checkoutMode === 'test' ? claimbeePlansByMode.test : claimbeePlansByMode.live,
+        ['primary', 'secondary', 'tertiary'],
+      ),
+    [checkoutMode],
+  );
+  const initialPlanId = useMemo(
+    () =>
+      availablePlans.find((plan) => plan.id === defaultSelectedPlan)?.id ??
+      getDefaultPlanId(availablePlans) ??
+      availablePlans[0]?.id ??
+      null,
+    [availablePlans],
+  );
+  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(
+    initialPlanId,
+  );
+  const [checkoutDialogOpen, setCheckoutDialogOpen] = useState(false);
+  const [specialOfferDialogOpen, setSpecialOfferDialogOpen] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get('checkout_offer') === 'first';
+  });
+  const [error, setError] = useState<string | null>(null);
+  const [discountStateReady, setDiscountStateReady] = useState(false);
+  const [discountState, setDiscountState] = useState<PaywallDiscountState>(() =>
+    resolvePaywallDiscountState({
+      discounts: billingDiscounts,
+      nowMs: Date.now(),
+      storedValue: null,
+    }),
+  );
+  const [activeStoryIndex, setActiveStoryIndex] = useState(0);
+  const [openFaqIds, setOpenFaqIds] = useState<string[]>([]);
+  const [checkoutEmail, setCheckoutEmail] = useState(user.email);
+  const [paywallWalletAvailability, setPaywallWalletAvailability] = useState<PaywallWalletAvailabilityState>({
+    intentKey: '',
+    methods: {},
+  });
+  const paywallStepRef = useRef<HTMLDivElement | null>(null);
+
+  const activeCouponId = discountState.couponId;
+  const displayPlans = useMemo(
+    () =>
+      buildDiscountedPaywallPlans({
+        plans: availablePlans,
+        couponId: activeCouponId,
+        discountPercent: discountState.discountPercent,
+      }),
+    [activeCouponId, availablePlans, discountState.discountPercent],
+  );
+  const selectedPlan = useMemo(() => {
+    if (availablePlans.length === 0) {
+      return null;
+    }
+
+    if (!selectedPlanId) {
+      return availablePlans.find((plan) => plan.id === initialPlanId) ?? availablePlans[0];
+    }
+
+    return availablePlans.find((plan) => plan.id === selectedPlanId) ?? availablePlans[0];
+  }, [availablePlans, initialPlanId, selectedPlanId]);
+  const selectedDisplayPlan = useMemo(() => {
+    if (displayPlans.length === 0) {
+      return null;
+    }
+
+    if (!selectedPlanId) {
+      return displayPlans.find((plan) => plan.id === initialPlanId) ?? displayPlans[0] ?? null;
+    }
+
+    return displayPlans.find((plan) => plan.id === selectedPlanId) ?? displayPlans[0];
+  }, [displayPlans, initialPlanId, selectedPlanId]);
+  const checkoutSummaryLabel =
+    selectedDisplayPlan?.checkoutSummaryLabel?.trim() || selectedDisplayPlan?.title || 'Selected plan';
+  const storyOptions = useMemo<readonly StoryOption[]>(
+    () =>
+      content.stories.items.map((item, index) => ({
+        quote: item.quote,
+        author: item.author,
+        backgroundColor:
+          claimbeeStoryBackgroundColors[index % claimbeeStoryBackgroundColors.length],
+      })),
+    [content.stories.items],
+  );
+  const activeStory = storyOptions[activeStoryIndex] ?? storyOptions[0] ?? null;
+  const minutes = Math.floor(discountState.remainingSeconds / 60);
+  const seconds = discountState.remainingSeconds % 60;
+  const upgradedDiscountActive = activeCouponId === CLAIMBEE_PAYWALL_SECOND_COUPON_ID;
+  const activeDiscountStartedAtMs =
+    discountState.stage === 'second'
+      ? discountState.secondStartedAtMs
+      : discountState.firstStartedAtMs;
+  const serializedDiscountSnapshot = useMemo(
+    () => serializePaywallDiscountState(discountState),
+    [discountState],
+  );
+  const promoDisplayName = useMemo(() => {
+    if (
+      discountState.status !== 'active' ||
+      typeof activeDiscountStartedAtMs !== 'number'
+    ) {
+      return '';
+    }
+
+    return getPaywallPromoDisplayName(activeDiscountStartedAtMs);
+  }, [activeDiscountStartedAtMs, discountState.status]);
+  const paymentDisclaimer = useMemo(() => {
+    if (!selectedPlan) {
+      return '';
+    }
+
+    return buildPaywallRenewalDisclaimer({
+      plan: selectedPlan,
+      hasActiveDiscount: Boolean(activeCouponId),
+      productName: 'ClaimBee',
+    });
+  }, [activeCouponId, selectedPlan]);
+  const appliedDiscountAmountCents = useMemo(() => {
+    if (!selectedDisplayPlan) {
+      return 0;
+    }
+
+    return Math.max(0, selectedDisplayPlan.baseAmountCents - selectedDisplayPlan.amountCents);
+  }, [selectedDisplayPlan]);
+  const checkoutDiscountPercent = discountState.discountPercent ?? 0;
+  const checkoutPromoActive =
+    Boolean(selectedDisplayPlan?.hasActiveDiscount) &&
+    discountState.status === 'active' &&
+    checkoutDiscountPercent > 0 &&
+    appliedDiscountAmountCents > 0;
+  const checkoutAnalyticsMetadata = useMemo(() => {
+    if (!selectedDisplayPlan) {
+      return null;
+    }
+
+    return {
+      planId: selectedDisplayPlan.id,
+      providerPlanId: selectedDisplayPlan.providerPlanId || null,
+      couponId: checkoutPromoActive ? selectedDisplayPlan.couponId : null,
+      summaryLabel: checkoutSummaryLabel,
+      amountCents: selectedDisplayPlan.amountCents,
+      currency: 'USD',
+      ...(typeof selectedDisplayPlan.analyticsPurchaseValue === 'number'
+        ? { value: selectedDisplayPlan.analyticsPurchaseValue }
+        : {}),
+      environment: checkoutMode,
+    };
+  }, [checkoutMode, checkoutPromoActive, checkoutSummaryLabel, selectedDisplayPlan]);
+  const checkoutAnalyticsContext = useMemo(() => {
+    if (!checkoutAnalyticsMetadata) {
+      return null;
+    }
+
+    return {
+      environment: checkoutMode,
+      featureFlags,
+      metadata: checkoutAnalyticsMetadata,
+      runtimeConfig: checkoutRuntimeConfig,
+      stepId: analyticsStepId,
+      stepName: analyticsStepName,
+      stepType: stepPaywall.type,
+      stepContractVersion: funnelManifest.stepContractVersion,
+    };
+  }, [analyticsStepId, analyticsStepName, checkoutAnalyticsMetadata, checkoutMode, featureFlags]);
+  const successReturnUrl = useMemo(() => {
+    if (typeof window === 'undefined') {
+      return '';
+    }
+
+    const successUrl = new URL(`${window.location.origin}${getPathForStep(stepSubscriptionStartedId)}`);
+    if (user.id) {
+      successUrl.searchParams.set('user_id', user.id);
+    }
+    successUrl.searchParams.set('source', 'stripe-elements');
+
+    return successUrl.toString();
+  }, [user.id]);
+  const checkoutSession = useStripeSubscriptionCheckoutSession({
+    analyticsMetadata: checkoutAnalyticsMetadata,
+    checkoutMode,
+    couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null,
+    customerEmail: checkoutEmail || user.email,
+    displayPlan: selectedDisplayPlan,
+    onError: setError,
+    plan: selectedPlan,
+    returnUrl: successReturnUrl,
+    runtimeConfig: checkoutRuntimeConfig,
+    userId: user.id,
+  });
+  const checkoutDisabled = !checkoutSession.configured || !selectedPlan || !selectedDisplayPlan;
+  const checkoutDialogReady =
+    checkoutDialogOpen &&
+    Boolean(checkoutSession.activeClientSecret) &&
+    Boolean(checkoutSession.stripePromise) &&
+    Boolean(selectedDisplayPlan);
+  const currentPaywallWalletAvailability: PaywallWalletAvailabilityState['methods'] =
+    paywallWalletAvailability.intentKey === checkoutSession.intentKey
+      ? paywallWalletAvailability.methods
+      : {};
+  const checkoutInitialWalletAvailable = walletPaymentMethods.some(
+    (method) => currentPaywallWalletAvailability[method] === true,
+  )
+    ? true
+    : null;
+  const checkoutTotalValue = useMemo(() => {
+    if (!selectedDisplayPlan) {
+      return '';
+    }
+
+    return selectedDisplayPlan.priceLabel.split('/')[0]?.trim() || selectedDisplayPlan.priceLabel;
+  }, [selectedDisplayPlan]);
+  const checkoutDiscountLabel = checkoutPromoActive
+    ? content.checkout.discountRowLabelTemplate.replace(
+        '{percent}',
+        String(checkoutDiscountPercent),
+      )
+    : '';
+  const checkoutDiscountAmountLabel = checkoutPromoActive
+    ? `-${formatCheckoutAmount(appliedDiscountAmountCents)}`
+    : '';
+  const checkoutSavedLabel = checkoutPromoActive
+    ? content.checkout.savedLabelTemplate
+        .replace('{amount}', formatCheckoutAmount(appliedDiscountAmountCents))
+        .replace('{percent}', String(checkoutDiscountPercent))
+    : '';
+  useEffect(() => {
+    return deferPaywallStateSync(() => {
+      setDiscountState(
+        resolvePaywallDiscountState({
+          discounts: billingDiscounts,
+          nowMs: Date.now(),
+          storedValue: readPaywallStateValue({
+            legacyKeys: CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS,
+          }),
+        }),
+      );
+      setDiscountStateReady(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    return deferPaywallStateSync(() => {
+      setCheckoutEmail(user.email);
+    });
+  }, [user.email]);
+
+  useEffect(() => {
+    if (!discountStateReady) {
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      setDiscountState((current) => {
+        const nextState = advancePaywallDiscountState({
+          discounts: billingDiscounts,
+          state: current,
+          nowMs: Date.now(),
+        });
+        return nextState.status === current.status &&
+          nextState.remainingSeconds === current.remainingSeconds &&
+          nextState.expiresAtMs === current.expiresAtMs
+          ? current
+          : nextState;
+      });
+    }, 1000);
+
+    return () => window.clearInterval(timer);
+  }, [discountStateReady]);
+
+  useEffect(() => {
+    if (storyOptions.length < 2) {
+      return;
+    }
+
+    const storyTimer = window.setInterval(() => {
+      setActiveStoryIndex((current) => (current + 1) % storyOptions.length);
+    }, 2500);
+
+    return () => window.clearInterval(storyTimer);
+  }, [storyOptions.length]);
+
+  useEffect(() => {
+    if (!discountStateReady) {
+      return;
+    }
+
+    updatePaywallStateValue(
+      () => serializedDiscountSnapshot,
+      {
+        legacyKeys: CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS,
+      },
+    );
+  }, [discountStateReady, serializedDiscountSnapshot]);
+
+  const updatePaywallWalletAvailability = (
+    method: PlatformWalletPaymentMethod,
+    available: boolean,
+  ) => {
+    setPaywallWalletAvailability((current) => {
+      const currentMethods =
+        current.intentKey === checkoutSession.intentKey
+          ? current.methods
+          : {};
+
+      return {
+        intentKey: checkoutSession.intentKey,
+        methods: {
+          ...currentMethods,
+          [method]: available,
+        },
+      };
+    });
+  };
+
+  const handleApplePayAvailabilityChange = (available: boolean) =>
+    updatePaywallWalletAvailability('applePay', available);
+
+  const handleGooglePayAvailabilityChange = (available: boolean) =>
+    updatePaywallWalletAvailability('googlePay', available);
+
+  const startCheckout = async () => {
+    if (checkoutDisabled || checkoutSession.loading.card) {
+      return;
+    }
+
+    if (checkoutSession.activeClientSecret) {
+      setCheckoutDialogOpen(true);
+      return;
+    }
+
+    const readyClientSecret = await checkoutSession.prepareCardCheckout();
+    if (readyClientSecret) {
+      setCheckoutDialogOpen(true);
+    }
+  };
+
+  const trackPaymentInfoSubmitted = () => {
+    if (!selectedDisplayPlan || !checkoutAnalyticsMetadata) {
+      return;
+    }
+
+    const checkoutSessionId = checkoutSession.checkoutSessionId?.trim();
+    if (!checkoutSessionId) {
+      return;
+    }
+
+    completeStep(analyticsStepId, {
+      planId: selectedDisplayPlan.id,
+    });
+    publicAnalyticsSdk.trackPaymentInfoSubmitted({
+      eventId: `add_payment_info:${checkoutSessionId}`,
+      stepId: analyticsStepId,
+      stepName: analyticsStepName,
+      stepType: stepPaywall.type,
+      stepContractVersion: funnelManifest.stepContractVersion,
+      featureFlags,
+      metadata: checkoutAnalyticsMetadata,
+    });
+    void publicAnalyticsSdk.flush().catch(() => 0);
+  };
+
+  const preparePaywallWalletCheckout = async (): Promise<string | null> => {
+    const normalizedEmail = checkoutEmail.trim() || user.email.trim();
+    if (!normalizedEmail) {
+      setCheckoutDialogOpen(true);
+      return null;
+    }
+
+    return normalizedEmail;
+  };
+
+  const openCardCheckoutFromUnavailableWallet = async () => {
+    if (checkoutDisabled || checkoutSession.loading.card) {
+      return;
+    }
+
+    const readyClientSecret =
+      checkoutSession.activeClientSecret ?? await checkoutSession.prepareCardCheckout();
+    if (readyClientSecret) {
+      setCheckoutDialogOpen(true);
+    }
+  };
+
+  const commitCheckoutEmail = async (draftEmail: string): Promise<string> => {
+    const normalizedEmail = draftEmail.trim();
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
+      throw new Error(content.checkout.customerEmailInvalidMessage);
+    }
+
+    if (normalizedEmail === user.email.trim()) {
+      setCheckoutEmail(normalizedEmail);
+      return normalizedEmail;
+    }
+
+    const updatedUser = await apiService.updateUser({
+      ...user,
+      email: normalizedEmail,
+      document: user.document ?? {},
+      attributes: {
+        ...attributes,
+        ...user.attributes,
+      },
+    }, {
+      attribution: collectCurrentFunnelAttribution(),
+    });
+
+    const syncedEmail = updatedUser.email.trim() || normalizedEmail;
+    setUser(updatedUser);
+    setCheckoutEmail(syncedEmail);
+    return syncedEmail;
+  };
+
+  const closeCheckoutDialog = () => {
+    setCheckoutDialogOpen(false);
+    setError(null);
+    if (discountState.stage === 'first' && discountState.status === 'active') {
+      setSpecialOfferDialogOpen(true);
+    }
+  };
+
+  const handleSpecialOfferAccept = () => {
+    setSpecialOfferDialogOpen(false);
+    paywallStepRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    setDiscountState((current) =>
+      activateSecondPaywallDiscount({
+        discounts: billingDiscounts,
+        state: current,
+        nowMs: Date.now(),
+      }),
+    );
+  };
+
+  const toggleFaqId = (faqId: string) => {
+    setOpenFaqIds((current) =>
+      current.includes(faqId)
+        ? current.filter((currentId) => currentId !== faqId)
+        : [...current, faqId],
+    );
+  };
+
+  if (!discountStateReady) {
+    return (
+      <>
+        <div className='paywall-v2-loading-screen' aria-live='polite'>
+          <div className='paywall-v2-loading-content'>
+            <div className='paywall-v2-loading-spinner' aria-hidden='true' />
+            <p className='paywall-v2-loading-label'>{content.loadingLabel}</p>
+          </div>
+        </div>
+
+        <style>{stepPaywallStyles}</style>
+      </>
+    );
+  }
+
+  if (checkoutSession.loading.card) {
+    return (
+      <>
+        <div
+          className='paywall-v2-loading-screen'
+          aria-label='Loading checkout'
+          aria-live='polite'
+        >
+          <div className='paywall-v2-loading-content'>
+            <div className='paywall-v2-loading-spinner' aria-hidden='true' />
+          </div>
+        </div>
+
+        <style>{stepPaywallStyles}</style>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {checkoutDialogOpen &&
+      checkoutSession.activeClientSecret &&
+      checkoutSession.stripePromise &&
+      selectedDisplayPlan ? (
+        <SharedStripeCheckoutV2Dialog
+          amountCents={selectedDisplayPlan.amountCents}
+          buttonColor='var(--color-secondary-text)'
+          cardSubmitLabel={content.checkout.cardSubmitLabel}
+          checkoutAnalytics={checkoutAnalyticsContext}
+          checkoutSessionId={checkoutSession.checkoutSessionId}
+          clientSecret={checkoutSession.activeClientSecret}
+          closeAriaLabel={content.checkout.closeAriaLabel}
+          countdownLabel={content.checkout.countdownLabel}
+          customerEmail={checkoutEmail}
+          customerEmailEditable={!user.email.trim()}
+          customerEmailLabel={content.checkout.customerEmailLabel}
+          customerEmailPlaceholder={content.checkout.customerEmailPlaceholder}
+          customerEmailInvalidMessage={content.checkout.customerEmailInvalidMessage}
+          customerName={user.name}
+          discountAmountLabel={checkoutDiscountAmountLabel}
+          discountLabel={checkoutDiscountLabel}
+          discountPercent={checkoutDiscountPercent}
+          initialWalletAvailable={checkoutInitialWalletAvailable}
+          onClose={closeCheckoutDialog}
+          onCustomerEmailChange={setCheckoutEmail}
+          onCustomerEmailCommit={commitCheckoutEmail}
+          onError={checkoutSession.setError}
+          onPaymentInfoSubmitted={trackPaymentInfoSubmitted}
+          paymentMethodLabels={content.checkout.paymentMethodLabels}
+          paypalButtonLabel={content.checkout.paypalButtonLabel}
+          paypalLabel={content.checkout.paypalLabel}
+          promoActive={checkoutPromoActive}
+          promoCode={promoDisplayName}
+          promoCodeLabel={content.checkout.promoCodeLabel}
+          processingLabel={content.checkout.processingLabel}
+          remainingSeconds={discountState.remainingSeconds}
+          returnUrl={successReturnUrl}
+          savedLabel={checkoutSavedLabel}
+          secureLabel={content.checkout.secureLabel}
+          satisfactionLabel={content.checkout.satisfactionLabel}
+          satisfactionPercent={content.checkout.satisfactionPercent}
+          stripePromise={checkoutSession.stripePromise}
+          summaryLabel={checkoutSummaryLabel}
+          themeColor='var(--color-secondary-text)'
+          title={content.checkout.title}
+          totalLabel={content.checkout.totalLabel}
+          totalValue={checkoutTotalValue}
+          walletButtonLabel={content.checkout.walletButtonLabel}
+          originalPriceLabel={content.checkout.originalPriceLabel}
+          originalPriceValue={selectedDisplayPlan.basePriceLabel}
+        />
+      ) : null}
+
+      {specialOfferDialogOpen ? (
+        <SharedCheckoutSpecialOfferDialog
+          buttonColor='var(--color-secondary-text)'
+          buttonLabel={content.checkout.specialOffer.buttonLabel}
+          description={content.checkout.specialOffer.description}
+          discountLabel={content.checkout.specialOffer.discountLabel}
+          imageAlt={content.checkout.specialOffer.image.alt}
+          imageSrc={content.checkout.specialOffer.image.src}
+          onAccept={handleSpecialOfferAccept}
+          themeColor='var(--color-secondary-text)'
+          title={content.checkout.specialOffer.title}
+        />
+      ) : null}
+
+      <div ref={paywallStepRef} className='paywall-v2-step' data-node-id='6992:6210'>
+        <section className='paywall-v2-top-row'>
+          <p className='paywall-v2-top-label'>{content.topBarDiscountLabel}</p>
+          <div className='paywall-v2-top-controls'>
+            <div
+              className='paywall-v2-countdown'
+              aria-label={`Time left ${String(minutes).padStart(2, '0')} minutes ${String(seconds).padStart(2, '0')} seconds`}
+            >
+              <p className='paywall-v2-countdown-value'>
+                <span className='paywall-v2-countdown-segment'>
+                  {String(minutes).padStart(2, '0')}
+                </span>
+                <span className='paywall-v2-countdown-separator'>:</span>
+                <span className='paywall-v2-countdown-segment'>
+                  {String(seconds).padStart(2, '0')}
+                </span>
+              </p>
+              <p className='paywall-v2-countdown-units' aria-hidden='true'>
+                <span className='paywall-v2-countdown-unit'>{content.countdownUnits[0]}</span>
+                <span className='paywall-v2-countdown-unit-spacer' />
+                <span className='paywall-v2-countdown-unit'>{content.countdownUnits[1]}</span>
+              </p>
+            </div>
+            <button
+              type='button'
+              className='paywall-v2-scroll-cta paywall-v2-vibe-cta'
+              onClick={() => {
+                const currentPlanId = selectedPlan?.id ?? selectedPlanId;
+                if (!currentPlanId) {
+                  return;
+                }
+
+                const selectedPlanElement = document.getElementById(`paywall-v2-plan-${currentPlanId}`);
+                selectedPlanElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+              }}
+            >
+              {content.topBarCtaLabel}
+            </button>
+          </div>
+        </section>
+
+        <section className='paywall-v2-head'>
+          {content.hero.pills.map((line, index) => (
+            <p
+              key={line}
+              className={index === 1 ? 'paywall-v2-pill-line is-green' : 'paywall-v2-pill-line'}
+            >
+              {line}
+            </p>
+          ))}
+        </section>
+
+        <Image
+          src={content.hero.image.src}
+          alt={content.hero.image.alt || ''}
+          width={390}
+          height={288}
+          className='paywall-v2-hero'
+          priority
+        />
+
+        {activeCouponId ? (
+          <section
+            className={[
+              'paywall-v2-promo-banner',
+              upgradedDiscountActive ? 'is-upgraded' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            aria-label={content.promo.ariaLabel}
+          >
+            {upgradedDiscountActive ? (
+              <>
+                <div className='paywall-v2-promo-upgrade-row'>
+                  <div className='paywall-v2-promo-upgrade-badge'>
+                    {discountState.previousDiscountPercent ? (
+                      <span className='paywall-v2-promo-upgrade-badge-old'>
+                        {discountState.previousDiscountPercent}%
+                      </span>
+                    ) : null}
+                      <span className='paywall-v2-promo-upgrade-badge-main'>
+                        {discountState.discountPercent}% OFF
+                      </span>
+                    </div>
+                  <p className='paywall-v2-promo-upgrade-label'>{content.promo.upgradedLabel}</p>
+                </div>
+                <div className='paywall-v2-promo-divider' aria-hidden='true' />
+                <p className='paywall-v2-promo-code'>{promoDisplayName}</p>
+              </>
+            ) : (
+              <>
+                <p className='paywall-v2-promo-label'>{content.promo.initialLabel}</p>
+                <div className='paywall-v2-promo-divider' aria-hidden='true' />
+                <p className='paywall-v2-promo-code'>{promoDisplayName}</p>
+              </>
+            )}
+          </section>
+        ) : null}
+
+        <section className='paywall-v2-highlight'>
+          <p className='paywall-v2-highlight-title'>
+            {content.highlight.title.map((line) => (
+              <span key={line}>
+                {line}
+                <br />
+              </span>
+            ))}
+          </p>
+          <p className='paywall-v2-highlight-copy'>{content.highlight.description}</p>
+        </section>
+
+        <section id='paywall-v2-plans' className='paywall-v2-plan-list' aria-label='Plans'>
+          <h2 className='paywall-v2-title'>{content.plans.title}</h2>
+
+          {displayPlans.map((plan) => (
+            <button
+              id={`paywall-v2-plan-${plan.id}`}
+              key={plan.id}
+              type='button'
+              className={[
+                'paywall-v2-plan',
+                plan.featuredTag ? 'paywall-v2-plan--featured' : '',
+                plan.id === selectedPlanId ? 'is-selected' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              onClick={() => setSelectedPlanId(plan.id)}
+            >
+              {plan.featuredTag ? <span className='paywall-v2-plan-tag'>{plan.featuredTag}</span> : null}
+              <div className='paywall-v2-plan-row'>
+                <div
+                  className={[
+                    'paywall-v2-plan-indicator',
+                    plan.id === selectedPlanId ? 'is-selected' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                  aria-hidden='true'
+                >
+                  {plan.id === selectedPlanId ? <span className='paywall-v2-plan-indicator-check' /> : null}
+                </div>
+                <div className='paywall-v2-plan-body'>
+                  <div className='paywall-v2-plan-left'>
+                    <p className='paywall-v2-plan-title'>{plan.title}</p>
+                    <p className='paywall-v2-plan-price'>
+                      {plan.oldPriceLabel ? (
+                        <span className='paywall-v2-plan-price-old'>{plan.oldPriceLabel}</span>
+                      ) : null}
+                      <span className='paywall-v2-plan-price-main'>{plan.priceLabel}</span>
+                    </p>
+                  </div>
+                  <div className='paywall-v2-plan-divider' aria-hidden='true' />
+                  <div className='paywall-v2-plan-right'>
+                    <p className='paywall-v2-plan-per-day-price'>
+                      {plan.oldPerDayAmount ? (
+                        <span className='paywall-v2-plan-per-day-old'>{plan.oldPerDayAmount}</span>
+                      ) : null}
+                      <span className='paywall-v2-plan-per-day-amount'>{plan.perDayAmount}</span>
+                    </p>
+                    <p className='paywall-v2-plan-per-day-label'>{plan.perDayLabel}</p>
+                  </div>
+                </div>
+              </div>
+            </button>
+          ))}
+        </section>
+
+        <section className='paywall-v2-payment-stack'>
+          {walletPaymentMethods.includes('applePay') ? (
+            <div className='paywall-v2-apple-pay-shell'>
+              {selectedDisplayPlan ? (
+                <ApplePaySubscriptionCheckoutSlot
+                  amountCents={selectedDisplayPlan.amountCents}
+                  beforeConfirm={preparePaywallWalletCheckout}
+                  checkoutAnalytics={checkoutAnalyticsContext}
+                  className='paywall-v2-apple-pay-button'
+                  customerEmail={checkoutEmail || user.email}
+                  customerName={user.name}
+                  disabled={checkoutDisabled}
+                  onAvailabilityChange={handleApplePayAvailabilityChange}
+                  onPaymentInfoSubmitted={trackPaymentInfoSubmitted}
+                  onUnavailableClick={openCardCheckoutFromUnavailableWallet}
+                  placeholderLabel={content.checkout.walletPlaceholderLabel}
+                  returnUrl={successReturnUrl}
+                  session={checkoutSession}
+                  summaryLabel={checkoutSummaryLabel}
+                  suspended={checkoutDialogReady || specialOfferDialogOpen}
+                />
+              ) : null}
+            </div>
+          ) : null}
+          {walletPaymentMethods.includes('googlePay') ? (
+            <div className='paywall-v2-google-pay-shell'>
+              {selectedDisplayPlan ? (
+                <GooglePaySubscriptionCheckoutSlot
+                  amountCents={selectedDisplayPlan.amountCents}
+                  beforeConfirm={preparePaywallWalletCheckout}
+                  checkoutAnalytics={checkoutAnalyticsContext}
+                  className='paywall-v2-google-pay-button'
+                  customerEmail={checkoutEmail || user.email}
+                  customerName={user.name}
+                  disabled={checkoutDisabled}
+                  onAvailabilityChange={handleGooglePayAvailabilityChange}
+                  onPaymentInfoSubmitted={trackPaymentInfoSubmitted}
+                  onUnavailableClick={openCardCheckoutFromUnavailableWallet}
+                  placeholderLabel={content.checkout.googlePayPlaceholderLabel}
+                  returnUrl={successReturnUrl}
+                  session={checkoutSession}
+                  summaryLabel={checkoutSummaryLabel}
+                  suspended={checkoutDialogReady || specialOfferDialogOpen}
+                />
+              ) : null}
+            </div>
+          ) : null}
+          <button
+            type='button'
+            className='paywall-v2-card-button paywall-v2-vibe-cta'
+            onClick={() => void startCheckout()}
+            disabled={checkoutDisabled || checkoutSession.loading.card}
+          >
+            {content.plans.cardButtonLabel}
+          </button>
+          <p className='paywall-v2-alt-meta'>{content.plans.metaLabels.join(' · ')}</p>
+          <p className='paywall-v2-disclaimer'>{paymentDisclaimer}</p>
+          <p className='paywall-v2-support'>
+            {content.checkout.supportText}{' '}
+            <a href={`mailto:${supportEmail}`}>{supportEmail}</a>
+          </p>
+          {!checkoutSession.configured ? (
+            <p className='paywall-v2-note'>{content.plans.stripeUnavailableNote}</p>
+          ) : null}
+          {error ? <p className='paywall-v2-error'>{error}</p> : null}
+        </section>
+
+        <section className='paywall-v2-feature-grid' data-node-id='6043:6154'>
+          <div className='paywall-v2-feature-grid-head'>
+            <h3 className='paywall-v2-feature-grid-title'>
+              {content.featureGrid.title.map((line) => (
+                <span key={line}>
+                  {line}
+                  <br />
+                </span>
+              ))}
+            </h3>
+            <p className='paywall-v2-feature-grid-subtitle'>
+              {content.featureGrid.subtitle}
+            </p>
+          </div>
+
+          <article className='paywall-v2-feature-card paywall-v2-feature-card--large'>
+            <Image
+              src={content.featureGrid.assistant.image?.src || '/paywall/ai-claim-assistant.png'}
+              alt={content.featureGrid.assistant.image?.alt || ''}
+              width={289}
+              height={105}
+              className='paywall-v2-feature-hero-image'
+            />
+            <div className='paywall-v2-feature-copy'>
+              <p className='paywall-v2-feature-name'>{content.featureGrid.assistant.title}</p>
+              <p className='paywall-v2-feature-description'>
+                {content.featureGrid.assistant.description}
+              </p>
+            </div>
+          </article>
+
+          <div className='paywall-v2-feature-row'>
+            {content.featureGrid.quickFeatures.slice(0, 2).map((feature, index) => (
+              <article key={feature.id} className='paywall-v2-feature-card paywall-v2-feature-card--small'>
+                <p
+                  className={[
+                    'paywall-v2-feature-tile-title',
+                    paywallFeatureTileColorClassNames[index],
+                  ].join(' ')}
+                >
+                  {(feature.title || '').split('\n').map((line) => (
+                    <span key={line}>{line}</span>
+                  ))}
+                </p>
+              </article>
+            ))}
+          </div>
+
+          <article className='paywall-v2-feature-card paywall-v2-feature-card--mid'>
+            <Image
+              src={content.featureGrid.history.image?.src || '/paywall/claim-history.png'}
+              alt={content.featureGrid.history.image?.alt || ''}
+              width={160}
+              height={129}
+              className='paywall-v2-feature-mid-image'
+            />
+            <p className='paywall-v2-feature-mid-title'>
+              {(content.featureGrid.history.title || '').split('\n').map((line) => (
+                <span key={line}>
+                  {line}
+                  <br />
+                </span>
+              ))}
+            </p>
+          </article>
+
+          <div className='paywall-v2-feature-row'>
+            {content.featureGrid.quickFeatures.slice(2).map((feature, index) => (
+              <article key={feature.id} className='paywall-v2-feature-card paywall-v2-feature-card--small'>
+                <p
+                  className={[
+                    'paywall-v2-feature-tile-title',
+                    paywallFeatureTileColorClassNames[index + 2],
+                  ].join(' ')}
+                >
+                  {(feature.title || '').split('\n').map((line) => (
+                    <span key={line}>{line}</span>
+                  ))}
+                </p>
+              </article>
+            ))}
+          </div>
+
+          <div className='paywall-v2-feature-row paywall-v2-feature-row--tall'>
+            {content.featureGrid.detailedFeatures.map((feature) => {
+              const imageDimensions =
+                paywallDetailImageDimensions[
+                  feature.id as keyof typeof paywallDetailImageDimensions
+                ] || {
+                  width: 160,
+                  height: 90,
+                };
+
+              return (
+                <article key={feature.id} className='paywall-v2-feature-card paywall-v2-feature-card--tall'>
+                  <Image
+                    src={feature.image?.src || ''}
+                    alt={feature.image?.alt || ''}
+                    width={imageDimensions.width}
+                    height={imageDimensions.height}
+                    className='paywall-v2-feature-detail-image'
+                  />
+                  <div className='paywall-v2-feature-detail-copy'>
+                    <p className='paywall-v2-feature-detail-title'>
+                      {(feature.title || '').split('\n').map((line) => (
+                        <span key={line}>{line}</span>
+                      ))}
+                    </p>
+                    <p className='paywall-v2-feature-detail-description'>
+                      {(feature.description || '').split('\n').map((line) => (
+                        <span key={line}>{line}</span>
+                      ))}
+                    </p>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </section>
+
+        <section className='paywall-v2-feedback' aria-live='polite'>
+          <h3 className='paywall-v2-feedback-title'>{content.stories.title}</h3>
+          <article
+            className='paywall-v2-feedback-card'
+            style={{ backgroundColor: activeStory?.backgroundColor || claimbeeStoryBackgroundColors[0] }}
+          >
+            <p className='paywall-v2-feedback-quote'>{activeStory?.quote}</p>
+            <p className='paywall-v2-feedback-author'>- {activeStory?.author}</p>
+          </article>
+        </section>
+
+        <section className='paywall-v2-faq'>
+          <h3 className='paywall-v2-faq-title'>{content.faq.title}</h3>
+          <div className='paywall-v2-faq-list'>
+            {content.faq.items.map((item) => {
+              const isOpen = openFaqIds.includes(item.id);
+
+              return (
+                <article
+                  key={item.id}
+                  className={['paywall-v2-faq-item', isOpen ? 'is-open' : ''].filter(Boolean).join(' ')}
+                >
+                  <button
+                    type='button'
+                    className='paywall-v2-faq-toggle'
+                    onClick={() => toggleFaqId(item.id)}
+                    aria-expanded={isOpen}
+                  >
+                    <span className='paywall-v2-faq-question'>{item.question}</span>
+                    <span
+                      className={['paywall-v2-faq-icon', isOpen ? 'is-open' : ''].filter(Boolean).join(' ')}
+                      aria-hidden='true'
+                    />
+                  </button>
+                  {item.answer && isOpen ? (
+                    <p className='paywall-v2-faq-answer'>{item.answer}</p>
+                  ) : null}
+                </article>
+              );
+            })}
+          </div>
+        </section>
+
+        <section className='paywall-v2-guarantee-card'>
+          <Image
+            src={content.guarantee.image.src}
+            alt={content.guarantee.image.alt || ''}
+            width={184}
+            height={184}
+            className='paywall-v2-badge'
+          />
+          <div className='paywall-v2-guarantee-copy'>
+            <p className='paywall-v2-guarantee-title'>{content.guarantee.title}</p>
+            <p className='paywall-v2-guarantee-text'>
+              {content.guarantee.description}{' '}
+              <Link href={content.guarantee.links[0]?.href || '/refund-policy'}>
+                {content.guarantee.links[0]?.label || 'refund policy'}
+              </Link>{' '}
+              for details and limitations.
+            </p>
+          </div>
+        </section>
+      </div>
+
+      <style>{stepPaywallStyles}</style>
+    </>
+  );
+}
+
+const stepPaywallStyles = `
+.paywall-v2-loading-screen {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+
+.paywall-v2-loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.paywall-v2-loading-spinner {
+  width: 26px;
+  height: 26px;
+  border: 3px solid rgb(63 81 181 / 14%);
+  border-top-color: var(--color-secondary-text);
+  border-radius: 999px;
+  animation: paywall-v2-loading-spin 720ms linear infinite;
+}
+
+.paywall-v2-loading-label {
+  margin: 0;
+  color: #5f6790;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-step {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #ecf7ff;
+  padding: 0 24px 64px;
+  container-type: inline-size;
+}
+
+.paywall-v2-top-row {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  min-height: 92px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  margin: 0 -24px 0;
+  padding: 8px 24px 10px;
+  background: #ecf7ff;
+  border-bottom: 1px solid rgb(63 81 181 / 10%);
+}
+
+.paywall-v2-top-label {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+
+.paywall-v2-top-controls {
+  display: grid;
+  grid-template-columns: minmax(128px, 164px) minmax(132px, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+
+.paywall-v2-countdown {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+}
+
+.paywall-v2-countdown-value {
+  margin: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
+  align-items: end;
+  color: var(--color-secondary-text);
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.08em;
+  text-align: left;
+}
+
+.paywall-v2-countdown-segment {
+  color: var(--color-secondary-text);
+}
+
+.paywall-v2-countdown-separator {
+  color: #b8b0a5;
+  text-align: center;
+}
+
+.paywall-v2-countdown-units {
+  margin: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
+  align-items: start;
+  color: #2f230f;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.15;
+}
+
+.paywall-v2-countdown-unit {
+  white-space: nowrap;
+  text-align: center;
+}
+
+.paywall-v2-scroll-cta {
+  width: 100%;
+  max-width: 188px;
+  min-height: 46px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 16px;
+  background: var(--color-secondary-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  cursor: pointer;
+  justify-self: end;
+}
+
+.paywall-v2-head {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.paywall-v2-pill-line {
+  margin: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--color-secondary-text);
+  padding: 4px 16px;
+  color: #fff;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-pill-line.is-green {
+  color: #bcfbb4;
+}
+
+.paywall-v2-hero {
+  display: block;
+  width: min(100%, 390px);
+  height: auto;
+  margin: -12px auto 0;
+}
+
+.paywall-v2-promo-banner {
+  --paywall-v2-promo-code-height: 41px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 382px;
+  min-height: 86px;
+  margin: -20px auto 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #f4c249;
+  box-shadow:
+    0 2px 5px rgb(40 58 128 / 10%),
+    0 9px 9px rgb(40 58 128 / 9%),
+    0 20px 12px rgb(40 58 128 / 5%),
+    0 36px 14px rgb(40 58 128 / 1%);
+  text-align: center;
+}
+
+.paywall-v2-promo-banner::before,
+.paywall-v2-promo-banner::after {
+  content: '';
+  position: absolute;
+  top: calc(100% - var(--paywall-v2-promo-code-height) - 1px);
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  background: #ecf7ff;
+  transform: translateY(-50%);
+}
+
+.paywall-v2-promo-banner::before {
+  left: -12px;
+}
+
+.paywall-v2-promo-banner::after {
+  right: -12px;
+}
+
+.paywall-v2-promo-label {
+  margin: 0;
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  color: #56330c;
+  font-family: var(--font-family-base, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.paywall-v2-promo-divider {
+  height: 1px;
+  margin: 0 13px;
+  background-image: repeating-linear-gradient(
+    to right,
+    rgb(255 255 255 / 92%) 0 10px,
+    transparent 10px 16px
+  );
+}
+
+.paywall-v2-promo-code {
+  margin: 0;
+  display: flex;
+  min-height: var(--paywall-v2-promo-code-height);
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+  background: #dca63a;
+  color: #fff;
+  font-family: var(--font-family-base, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+  text-align: center;
+  padding: 0 16px;
+  text-transform: uppercase;
+}
+
+.paywall-v2-promo-banner.is-upgraded {
+  min-height: 126px;
+  background: #edf4d4;
+}
+
+.paywall-v2-promo-banner.is-upgraded .paywall-v2-promo-code {
+  background: #dbe8b1;
+  color: #5f780d;
+}
+
+.paywall-v2-promo-upgrade-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px 14px 12px;
+}
+
+.paywall-v2-promo-upgrade-badge {
+  position: relative;
+  display: flex;
+  min-width: 110px;
+  min-height: 80px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 24px;
+  background: #76aa10;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.paywall-v2-promo-upgrade-badge::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -12px;
+  width: 0;
+  height: 0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  border-top: 12px solid #76aa10;
+  transform: translateX(-50%);
+}
+
+.paywall-v2-promo-upgrade-badge-old {
+  color: rgb(255 255 255 / 78%);
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: line-through;
+}
+
+.paywall-v2-promo-upgrade-badge-main {
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.05;
+  text-align: center;
+}
+
+.paywall-v2-promo-upgrade-label {
+  margin: 0;
+  color: #2f230f;
+  font-family: var(--font-family-base, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  text-align: left;
+}
+
+.paywall-v2-highlight {
+  margin-top: 16px;
+  border-radius: 16px;
+  background: #fff;
+  padding: 16px;
+  text-align: center;
+}
+
+.paywall-v2-highlight-title {
+  margin: 0;
+  color: var(--color-primary);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.036em;
+}
+
+.paywall-v2-highlight-copy {
+  margin: 12px 0 0;
+  color: #1b286f;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.paywall-v2-plan-list {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.paywall-v2-title {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-plan {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 92px;
+  border: 1px solid #dce2ff;
+  border-radius: 16px;
+  background: #fff;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.paywall-v2-plan--featured {
+  overflow: hidden;
+  border-color: var(--color-primary);
+}
+
+.paywall-v2-plan.is-selected {
+  border-color: var(--color-primary);
+  box-shadow: inset 0 0 0 1px var(--color-primary);
+}
+
+.paywall-v2-plan-tag {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-plan-row {
+  display: flex;
+  min-height: 92px;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 14px;
+  box-sizing: border-box;
+}
+
+.paywall-v2-plan-indicator {
+  width: 22px;
+  height: 22px;
+  border: 1.5px solid rgb(31 16 0 / 24%);
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.paywall-v2-plan-indicator.is-selected {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+}
+
+.paywall-v2-plan-indicator-check {
+  width: 7px;
+  height: 14px;
+  border-right: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg) translate(-1px, -2px);
+  box-sizing: border-box;
+}
+
+.paywall-v2-plan-body {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.paywall-v2-plan-left,
+.paywall-v2-plan-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+}
+
+.paywall-v2-plan-left {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+}
+
+.paywall-v2-plan-right {
+  width: min(34%, 118px);
+  min-width: 86px;
+  align-items: center;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.paywall-v2-plan-divider {
+  width: 1px;
+  align-self: stretch;
+  background: rgb(31 16 0 / 8%);
+  border-left: 1px solid rgb(31 16 0 / 8%);
+  flex-shrink: 0;
+}
+
+.paywall-v2-plan-title {
+  margin: 0;
+  color: rgba(31, 16, 0, 0.44);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.paywall-v2-plan-price {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  color: rgba(31, 16, 0, 0.72);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.paywall-v2-plan-price-old {
+  text-decoration: line-through;
+}
+
+.paywall-v2-plan-price-main {
+  color: rgba(31, 16, 0, 0.72);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+  min-width: 0;
+}
+
+.paywall-v2-plan-per-day-price {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 2px;
+}
+
+.paywall-v2-plan-per-day-old {
+  margin: 0;
+  color: rgba(31, 16, 0, 0.72);
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.25;
+  text-decoration: line-through;
+}
+
+.paywall-v2-plan-per-day-amount {
+  margin: 0;
+  color: rgba(31, 16, 0, 0.44);
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.05;
+}
+
+.paywall-v2-plan-per-day-label {
+  margin: 0;
+  color: rgba(31, 16, 0, 0.72);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.paywall-v2-plan.is-selected .paywall-v2-plan-title,
+.paywall-v2-plan.is-selected .paywall-v2-plan-per-day-amount {
+  color: var(--color-secondary-text);
+}
+
+.paywall-v2-payment-stack {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+}
+
+.paywall-v2-apple-pay-button,
+.paywall-v2-google-pay-button {
+  min-height: 64px;
+  border-radius: 16px;
+}
+
+.paywall-v2-apple-pay-shell,
+.paywall-v2-google-pay-shell {
+  width: 100%;
+}
+
+.paywall-v2-card-button {
+  width: 100%;
+  min-height: 64px;
+  border: 0;
+  border-radius: 16px;
+  cursor: pointer;
+}
+
+.paywall-v2-card-button,
+.paywall-v2-scroll-cta {
+  transition:
+    opacity 160ms ease,
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    background-color 180ms ease;
+}
+
+.paywall-v2-card-button:disabled,
+.paywall-v2-scroll-cta:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
+.paywall-v2-vibe-cta {
+  position: relative;
+  isolation: isolate;
+  overflow: visible;
+  transform-origin: center;
+}
+
+.paywall-v2-vibe-cta::after {
+  content: '';
+  position: absolute;
+  inset: -7px;
+  border: 2px solid rgb(63 81 181 / 0%);
+  border-radius: 22px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.paywall-v2-vibe-cta:not(:disabled) {
+  animation: paywall-v2-cta-beat 2400ms ease-in-out infinite;
+}
+
+.paywall-v2-vibe-cta:not(:disabled)::after {
+  animation: paywall-v2-cta-wave 2400ms ease-out infinite;
+}
+
+@keyframes paywall-v2-cta-beat {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  10% {
+    transform: scale(1.035);
+  }
+
+  18% {
+    transform: scale(1);
+  }
+
+  28% {
+    transform: scale(1.018);
+  }
+
+  38% {
+    transform: scale(1);
+  }
+}
+
+@keyframes paywall-v2-cta-wave {
+  0%,
+  17% {
+    opacity: 0;
+    transform: scale(0.98);
+    border-color: rgb(63 81 181 / 0%);
+  }
+
+  24% {
+    opacity: 0.42;
+    transform: scale(1.02);
+    border-color: rgb(63 81 181 / 28%);
+  }
+
+  48% {
+    opacity: 0;
+    transform: scale(1.14);
+    border-color: rgb(63 81 181 / 0%);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.14);
+    border-color: rgb(63 81 181 / 0%);
+  }
+}
+
+.paywall-v2-card-button {
+  background: var(--color-secondary-text);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.paywall-v2-alt-meta {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-disclaimer {
+  margin: 0;
+  border: 1px solid rgb(63 81 181 / 12%);
+  border-radius: 24px;
+  background: rgb(255 255 255 / 72%);
+  padding: 20px 18px;
+  color: #766f66;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.paywall-v2-support {
+  margin: 0;
+  color: #4d5470;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.paywall-v2-support a {
+  color: var(--color-secondary-text);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.paywall-v2-note,
+.paywall-v2-error {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.paywall-v2-note {
+  color: #4d5470;
+}
+
+.paywall-v2-error {
+  color: #d33;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .paywall-v2-vibe-cta:not(:disabled),
+  .paywall-v2-vibe-cta:not(:disabled)::after {
+    animation: none;
+  }
+}
+
+.paywall-v2-feedback {
+  margin: 32px -24px 0;
+}
+
+.paywall-v2-feedback-title {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-feedback-card {
+  margin-top: 24px;
+  box-sizing: border-box;
+  height: 372px;
+  padding: 48px 48px 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+  text-align: center;
+  transition: background-color 240ms ease;
+}
+
+.paywall-v2-feedback-quote {
+  margin: 0;
+  color: #fff;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.paywall-v2-feedback-author {
+  margin: 0;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.paywall-v2-faq {
+  margin-top: 32px;
+}
+
+.paywall-v2-faq-title {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-faq-list {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.paywall-v2-faq-item {
+  border-radius: 16px;
+  background: #fff;
+  padding: 24px 16px;
+}
+
+.paywall-v2-faq-toggle {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.paywall-v2-faq-question,
+.paywall-v2-faq-answer {
+  margin: 0;
+}
+
+.paywall-v2-faq-question {
+  color: var(--color-secondary-text);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.paywall-v2-faq-answer {
+  margin-top: 18px;
+  color: #585a5e;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: pre-line;
+}
+
+.paywall-v2-faq-icon {
+  position: relative;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: #ecf7ff;
+}
+
+.paywall-v2-faq-icon::before,
+.paywall-v2-faq-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--color-secondary-text);
+  transform: translate(-50%, -50%);
+  transition: opacity 160ms ease;
+}
+
+.paywall-v2-faq-icon::after {
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.paywall-v2-faq-icon.is-open::after {
+  opacity: 0;
+}
+
+.paywall-v2-guarantee-card {
+  margin-top: 32px;
+  border-radius: 16px;
+  background: #fff;
+  padding: 11px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.paywall-v2-badge {
+  width: 184px;
+  height: 184px;
+  object-fit: cover;
+  object-position: center 54%;
+}
+
+.paywall-v2-guarantee-copy {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+}
+
+.paywall-v2-guarantee-title {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.paywall-v2-guarantee-text {
+  margin: 0;
+  color: #6074e2;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.paywall-v2-guarantee-text a {
+  color: #3d59f8;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.paywall-v2-feature-grid {
+  margin-top: 48px;
+}
+
+.paywall-v2-feature-grid-head {
+  text-align: center;
+}
+
+.paywall-v2-feature-grid-title {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.036em;
+}
+
+.paywall-v2-feature-grid-subtitle {
+  margin: 16px 0 0;
+  color: var(--color-secondary-text);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.paywall-v2-feature-card {
+  border-radius: 16px;
+  background: #fff;
+}
+
+.paywall-v2-feature-card--large {
+  margin-top: 24px;
+  min-height: 220px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.paywall-v2-feature-hero-image {
+  width: 289px;
+  height: 105px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.paywall-v2-feature-copy {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+}
+
+.paywall-v2-feature-name {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.paywall-v2-feature-description {
+  margin: 0;
+  color: #6074e2;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.paywall-v2-feature-row {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.paywall-v2-feature-card--small {
+  min-height: 122px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.paywall-v2-feature-tile-title,
+.paywall-v2-feature-detail-title,
+.paywall-v2-feature-detail-description {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.paywall-v2-feature-tile-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-feature-title--orange {
+  color: var(--color-secondary);
+}
+
+.paywall-v2-feature-title--green {
+  color: var(--color-primary);
+}
+
+.paywall-v2-feature-card--mid {
+  margin-top: 24px;
+  min-height: 196px;
+  padding: 5px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.paywall-v2-feature-mid-image {
+  width: 160px;
+  height: 129px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.paywall-v2-feature-mid-title {
+  margin: 0;
+  color: var(--color-secondary-text);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.paywall-v2-feature-row--tall {
+  align-items: stretch;
+}
+
+.paywall-v2-feature-card--tall {
+  min-height: 255px;
+  padding: 16px 12px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+
+.paywall-v2-feature-detail-image {
+  height: auto;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.paywall-v2-feature-detail-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+}
+
+.paywall-v2-feature-detail-title {
+  color: var(--color-secondary-text);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.paywall-v2-feature-detail-description {
+  color: #6074e2;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+@media (max-width: 429px) {
+  .paywall-v2-step {
+    padding: 0 16px 48px;
+  }
+}
+
+@container (max-width: 429px) {
+  .paywall-v2-top-row {
+    min-height: 92px;
+    margin: 0 -16px 0;
+    padding: 8px 16px 10px;
+  }
+
+  .paywall-v2-top-controls {
+    grid-template-columns: minmax(120px, 150px) minmax(128px, 1fr);
+    gap: 10px;
+  }
+
+  .paywall-v2-countdown-value {
+    font-size: 40px;
+  }
+
+  .paywall-v2-scroll-cta {
+    min-height: 46px;
+    padding: 0 10px;
+    font-size: 15px;
+  }
+
+  .paywall-v2-plan-row {
+    gap: 10px;
+    padding: 14px 12px;
+  }
+
+  .paywall-v2-plan-body {
+    gap: 10px;
+  }
+
+  .paywall-v2-plan-right {
+    min-width: 80px;
+  }
+
+  .paywall-v2-feedback {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+}
+`;