:root:not(.dark) .landing-page-surface .pricing-page-shell {
  position: relative;
  isolation: isolate;
  color: #111827;
  background:
    radial-gradient(circle at top, rgba(239, 68, 68, 0.08), transparent 34%),
    radial-gradient(circle at 15% 0%, rgba(245, 158, 11, 0.05), transparent 26%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(249, 246, 239, 0.99));
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-intro,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-billing-section,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-grid,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-light-surface,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-final-cta {
  position: relative;
  z-index: 1;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .text-foreground {
  color: #111827;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .text-muted-foreground,
:root:not(.dark) .landing-page-surface .pricing-page-shell .text-zinc-600 {
  color: #475569;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .text-zinc-500 {
  color: #64748b;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .text-zinc-400 {
  color: #5b6472;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .text-zinc-300 {
  color: #334155;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .text-zinc-200 {
  color: #1f2937;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .border-border {
  border-color: rgba(216, 209, 198, 0.95);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .bg-background,
:root:not(.dark) .landing-page-surface .pricing-page-shell .bg-card {
  background-color: rgba(255, 255, 255, 0.9);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .bg-muted {
  background-color: rgba(248, 245, 239, 0.95);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell [class*="bg-zinc-900"] {
  background-color: rgba(255, 255, 255, 0.96);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell [class*="bg-zinc-950"] {
  background-color: rgba(250, 247, 240, 0.98);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell [class*="bg-zinc-800"] {
  background-color: rgba(248, 245, 239, 0.98);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell [class*="border-zinc-800"] {
  border-color: rgba(216, 209, 198, 0.95);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell [class*="border-zinc-700"] {
  border-color: rgba(216, 209, 198, 0.85);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-billing-toggle {
  background: linear-gradient(180deg, #ffffff, #f6f2ea);
  border-color: rgba(216, 209, 198, 0.95);
  box-shadow: 0 18px 40px -28px rgba(17, 17, 19, 0.22);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 239, 0.97));
  border-color: rgba(216, 209, 198, 0.95);
  box-shadow:
    0 22px 50px -34px rgba(17, 17, 19, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-card.is-popular {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 248, 246, 0.98));
  border-color: rgba(239, 68, 68, 0.18);
  box-shadow:
    0 28px 60px -36px rgba(239, 68, 68, 0.22),
    0 0 0 1px rgba(239, 68, 68, 0.08) inset;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-card .text-foreground {
  color: #111827;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-description,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-meta,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-feature {
  color: #475569;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-plan-price {
  color: #111827;
}

:root:not(.dark)
  .landing-page-surface
  .pricing-page-shell
  .pricing-plan-primary:not(.bg-gradient-to-r) {
  background: rgba(255, 255, 255, 0.96);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-comparison-shell {
  border-color: rgba(216, 209, 198, 0.95);
  box-shadow: 0 24px 55px -38px rgba(17, 17, 19, 0.24);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-api-card,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-timeline-section .group,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-risk-strip > div,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-faq-shell,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-trust-strip {
  color: #111827;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-api-card {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 239, 0.97));
  border-color: rgba(216, 209, 198, 0.95);
  box-shadow: 0 24px 55px -38px rgba(17, 17, 19, 0.24);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-api-card .rounded-xl.border {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 239, 0.97));
  border-color: rgba(216, 209, 198, 0.95);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-timeline-section .group,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-risk-strip > div {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 239, 0.97));
  border-color: rgba(216, 209, 198, 0.95);
  box-shadow: 0 16px 34px -28px rgba(17, 17, 19, 0.16);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-api-card .text-white,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-timeline-section .text-white,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-risk-strip .text-white {
  color: #111827;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-faq-shell {
  background:
    radial-gradient(circle at top, rgba(239, 68, 68, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 247, 240, 0.96));
  border: 1px solid rgba(216, 209, 198, 0.9);
  border-radius: 1.75rem;
  padding: 1.5rem;
  box-shadow: 0 24px 55px -38px rgba(17, 17, 19, 0.22);
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-faq-shell h2,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-api-card h2,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-timeline-section h2,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-trust-strip,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-comparison-section h2 {
  color: #111827;
}

:root:not(.dark)
  .landing-page-surface
  .pricing-page-shell
  .pricing-faq-shell
  .text-muted-foreground,
:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-api-card .text-muted-foreground,
:root:not(.dark)
  .landing-page-surface
  .pricing-page-shell
  .pricing-timeline-section
  .text-muted-foreground,
:root:not(.dark)
  .landing-page-surface
  .pricing-page-shell
  .pricing-trust-strip
  .text-muted-foreground {
  color: #475569;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-faq-shell dl {
  color: #111827;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-faq-shell dt {
  color: #111827;
}

:root:not(.dark) .landing-page-surface .pricing-page-shell .pricing-faq-shell dd {
  color: #475569;
}

:root:not(.dark)
  .landing-page-surface
  .pricing-page-shell
  .pricing-comparison-section
  .text-zinc-500,
:root:not(.dark)
  .landing-page-surface
  .pricing-page-shell
  .pricing-timeline-section
:root:not(.dark) .select-plan-surface {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.07), transparent 32%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.05), transparent 26%),
    linear-gradient(180deg, #faf8f3 0%, #f5f2ea 48%, #faf8f3 100%);
}

:root:not(.dark) .select-plan-surface ::selection {
  background: rgba(217, 119, 6, 0.18);
  color: #92400e;
}

/* ── Typography ────────────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .text-white {
  color: #18181b;
}
:root:not(.dark) .select-plan-surface .text-zinc-100 {
  color: #27272a;
}
:root:not(.dark) .select-plan-surface .text-zinc-200 {
  color: #27272a;
}
:root:not(.dark) .select-plan-surface .text-zinc-300 {
  color: #3f3f46;
}
:root:not(.dark) .select-plan-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .select-plan-surface .text-zinc-500 {
  color: #71717a;
}
:root:not(.dark) .select-plan-surface .text-zinc-600 {
  color: #52525b;
}
:root:not(.dark) .select-plan-surface .text-red-400 {
  color: #dc2626;
}
:root:not(.dark) .select-plan-surface .text-red-300 {
  color: #b91c1c;
}
:root:not(.dark) .select-plan-surface .text-amber-300 {
  color: #d97706;
}
:root:not(.dark) .select-plan-surface .text-amber-400 {
  color: #b45309;
}
:root:not(.dark) .select-plan-surface .text-emerald-400 {
  color: #059669;
}

/* ── Background reset ──────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface,
:root:not(.dark) .select-plan-surface .bg-zinc-950,
:root:not(.dark) .select-plan-surface .bg-zinc-900,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/95,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/90,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/80,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/50,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/40,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/30,
:root:not(.dark) .select-plan-surface .bg-zinc-900\/20 {
  background: transparent;
}

/* ── Border overrides ──────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .border-zinc-800 {
  border-color: #e4e4e7;
}
:root:not(.dark) .select-plan-surface .border-zinc-800\/50 {
  border-color: #e4e4e7;
}
:root:not(.dark) .select-plan-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .select-plan-surface .border-zinc-600 {
  border-color: #a1a1aa;
}

/* ── Hero badge ────────────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .inline-flex.items-center.gap-2.rounded-full {
  background: rgba(255, 251, 235, 0.95);
  border-color: rgba(217, 119, 6, 0.2);
}

:root:not(.dark) .select-plan-surface .text-amber-300.inline-flex {
  color: #92400e;
}

:root:not(.dark) .select-plan-surface .from-amber-200 {
  --tw-gradient-from: #d97706;
  --tw-gradient-via: #b45309;
  --tw-gradient-to: #dc2626;
}

/* ── Billing toggle ───────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .grid-cols-2.rounded-2xl.border {
  background: linear-gradient(180deg, #ffffff, #f8f5ef);
}

:root:not(.dark) .select-plan-surface .grid-cols-2 [aria-pressed="true"] {
  color: #ffffff;
}

/* ── Plan cards ────────────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .relative.flex-col.rounded-3xl {
  box-shadow: 0 22px 50px -34px rgba(17, 17, 19, 0.14);
}

:root:not(.dark) .select-plan-surface .border-zinc-800.bg-zinc-900\/40 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 246, 0.96));
  border-color: #e4e4e7;
}

:root:not(.dark) .select-plan-surface .hover\:border-red-500\/30:hover {
  border-color: rgba(239, 68, 68, 0.3);
}

:root:not(.dark) .select-plan-surface .border-red-500\/40.bg-gradient-to-b {
  background: linear-gradient(180deg, rgba(255, 247, 244, 0.98), rgba(255, 255, 255, 0.98));
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow:
    0 28px 60px -36px rgba(239, 68, 68, 0.12),
    0 0 0 1px rgba(239, 68, 68, 0.05) inset;
}

/* Selected card state */
:root:not(.dark) .select-plan-surface button.rounded-3xl[aria-pressed="true"] {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow:
    0 28px 60px -36px rgba(239, 68, 68, 0.18),
    0 0 0 1px rgba(239, 68, 68, 0.06) inset;
}

/* Icon container */
:root:not(.dark) .select-plan-surface .bg-red-500\/15,
:root:not(.dark) .select-plan-surface .bg-red-500\/10 {
  background: rgba(239, 68, 68, 0.08);
}

/* Radio indicator - unselected */
:root:not(.dark) .select-plan-surface .border-zinc-600.h-5 {
  border-color: #d4d4d8;
}

/* Price divider */
:root:not(.dark) .select-plan-surface .border-b.border-zinc-800.mb-6 {
  border-color: #e4e4e7;
}

/* Savings badge */
:root:not(.dark) .select-plan-surface .bg-emerald-500\/10 {
  background: rgba(5, 150, 105, 0.08);
}

/* Trial highlight - popular */
:root:not(.dark) .select-plan-surface .border-red-500\/10.bg-red-500\/5 {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.1);
}

:root:not(.dark) .select-plan-surface .border-red-500\/10.bg-red-500\/5 .text-red-300\/80 {
  color: #b91c1c;
}

/* Trial highlight - non-popular */
:root:not(.dark) .select-plan-surface .border-zinc-800.bg-zinc-800\/50 {
  background: #f8f6f2;
  border-color: #e4e4e7;
}

/* Feature list divider line */
:root:not(.dark) .select-plan-surface .pb-6.border-b.border-zinc-800 {
  border-color: #e4e4e7;
}

/* ── Comparison table ──────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .rounded-2xl.border.border-zinc-800.bg-zinc-900\/30 {
  background: #ffffff;
  border-color: #e4e4e7;
  box-shadow: 0 24px 55px -38px rgba(17, 17, 19, 0.08);
}

:root:not(.dark) .select-plan-surface .border-b.border-zinc-800.bg-zinc-900\/50 {
  background: rgba(255, 252, 246, 0.96);
  border-color: #e4e4e7;
}

:root:not(.dark) .select-plan-surface thead .border-b.border-zinc-800 {
  border-color: #e4e4e7;
}

:root:not(.dark) .select-plan-surface tbody .border-b.border-zinc-800\/50 {
  border-color: rgba(228, 228, 231, 0.5);
}

:root:not(.dark) .select-plan-surface .bg-zinc-900\/20 {
  background: rgba(248, 245, 239, 0.96);
}

:root:not(.dark) .select-plan-surface .hover\:bg-zinc-800\/20:hover {
  background: rgba(250, 245, 240, 0.98);
}

/* Feature name in table */
:root:not(.dark) .select-plan-surface tbody td:first-child {
  color: #27272a;
}

/* Empty check circle */
:root:not(.dark) .select-plan-surface .rounded-full.border.border-zinc-700 {
  border-color: #d4d4d8;
}

/* ── CTA section ───────────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .relative.rounded-3xl.border-amber-500\/20 {
  background:
    radial-gradient(circle at top, rgba(239, 68, 68, 0.06), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 240, 0.96));
  border-color: rgba(239, 68, 68, 0.14);
  box-shadow:
    0 30px 70px -44px rgba(17, 17, 19, 0.14),
    0 0 0 1px rgba(239, 68, 68, 0.04) inset;
}

/* CTA shield badge */
:root:not(.dark) .select-plan-surface .border-emerald-500\/15.bg-emerald-500\/5 {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(5, 150, 105, 0.15);
}

/* CTA divider */
:root:not(.dark) .select-plan-surface .mt-8.pt-6.border-t.border-zinc-800 {
  border-color: #e4e4e7;
}

/* Disabled CTA button */
:root:not(.dark) .select-plan-surface .bg-zinc-800.text-zinc-500.cursor-not-allowed {
  background: #e4e4e7;
  color: #a1a1aa;
}

/* ── Loading skeleton ──────────────────────────────────────────────── */
:root:not(.dark) .select-plan-surface .animate-pulse.bg-zinc-800 {
  background: #e4e4e7;
}

:root:not(.dark) .select-plan-surface .rounded-3xl.border.border-zinc-800 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 246, 0.96));
  border-color: #e4e4e7;
}

/* ── /for pages light theme (Warm Studio) ───────────────────────────── */

:root:not(.dark) .for-page-surface {
  background: #f7f5ef;
}

:root:not(.dark) .for-page-surface ::selection {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

/* Typography */
:root:not(.dark) .for-page-surface .text-white {
  color: #1c1917;
}
:root:not(.dark) .for-page-surface .text-zinc-100 {
  color: #292524;
}
:root:not(.dark) .for-page-surface .text-zinc-200 {
  color: #292524;
}
:root:not(.dark) .for-page-surface .text-zinc-300 {
  color: #44403c;
}
:root:not(.dark) .for-page-surface .text-zinc-400 {
  color: #6b6358;
}
:root:not(.dark) .for-page-surface .text-zinc-500 {
  color: #787468;
}
:root:not(.dark) .for-page-surface .text-zinc-600 {
  color: #6b6358;
}
:root:not(.dark) .for-page-surface .text-red-400 {
  color: #dc2626;
}
:root:not(.dark) .for-page-surface .text-red-300 {
  color: #b91c1c;
}
:root:not(.dark) .for-page-surface .text-red-200 {
  color: #ef4444;
}
:root:not(.dark) .for-page-surface .text-amber-300 {
  color: #d97706;
}
:root:not(.dark) .for-page-surface .text-amber-400 {
  color: #b45309;
}
:root:not(.dark) .for-page-surface .text-emerald-400 {
  color: #059669;
}

/* Background resets */
:root:not(.dark) .for-page-surface,
:root:not(.dark) .for-page-surface .bg-zinc-950,
:root:not(.dark) .for-page-surface .bg-zinc-950\/50,
:root:not(.dark) .for-page-surface .bg-zinc-950\/40,
:root:not(.dark) .for-page-surface .bg-zinc-900,
:root:not(.dark) .for-page-surface .bg-zinc-900\/95,
:root:not(.dark) .for-page-surface .bg-zinc-900\/90,
:root:not(.dark) .for-page-surface .bg-zinc-900\/80,
:root:not(.dark) .for-page-surface .bg-zinc-900\/50,
:root:not(.dark) .for-page-surface .bg-zinc-900\/40,
:root:not(.dark) .for-page-surface .bg-zinc-900\/30,
:root:not(.dark) .for-page-surface .bg-zinc-900\/20 {
  background: transparent;
}

:root:not(.dark) .for-page-surface .bg-zinc-800 {
  background: #ece7dd;
}
:root:not(.dark) .for-page-surface .bg-zinc-700 {
  background: #e3ddd0;
}

/* Border overrides */
:root:not(.dark) .for-page-surface .border-zinc-800 {
  border-color: #ddd8cc;
}
:root:not(.dark) .for-page-surface .border-zinc-800\/50 {
  border-color: #ddd8cc;
}
:root:not(.dark) .for-page-surface .border-zinc-800\/60 {
  border-color: #ddd8cc;
}
:root:not(.dark) .for-page-surface .border-zinc-700 {
  border-color: #d5cec0;
}
:root:not(.dark) .for-page-surface .border-zinc-700\/60 {
  border-color: #d5cec0;
}
:root:not(.dark) .for-page-surface .border-zinc-600 {
  border-color: #c5bbaa;
}
:root:not(.dark) .for-page-surface .border-border {
  border-color: #ddd8cc;
}
:root:not(.dark) .for-page-surface .border-border\/70 {
  border-color: rgba(221, 216, 204, 0.7);
}

/* Card backgrounds */
:root:not(.dark) .for-page-surface .rounded-xl.border.border-zinc-700\/60.bg-zinc-900\/50 {
  background: #ffffff;
  border-color: #ddd8cc;
}

:root:not(.dark) .for-page-surface .rounded-xl.border.border-zinc-800 {
  background: #ffffff;
  border-color: #ddd8cc;
}

:root:not(.dark) .for-page-surface .border-zinc-800.bg-zinc-900\/40 {
  background: linear-gradient(180deg, rgba(247, 245, 239, 0.95), rgba(236, 231, 221, 0.5));
  border-color: #ddd8cc;
}

:root:not(.dark) .for-page-surface .border-zinc-800.bg-zinc-900\/50 {
  background: #ffffff;
  border-color: #ddd8cc;
}

/* Stat callout card */
:root:not(.dark) .for-page-surface .rounded-xl.border.border-zinc-700.bg-zinc-900 {
  background: #ffffff;
  border-color: #ddd8cc;
  box-shadow: 0 4px 24px -8px rgba(28, 25, 23, 0.06);
}

/* Numbered step circles */
:root:not(.dark) .for-page-surface .bg-red-600.text-white {
  background: #ef4444;
  color: #ffffff;
}

/* CTA buttons */
:root:not(.dark) .for-page-surface .bg-red-600 {
  background: #ef4444;
}
:root:not(.dark) .for-page-surface .hover\:bg-red-500:hover {
  background: #dc2626;
}

/* Link hover states */
:root:not(.dark) .for-page-surface .hover\:text-zinc-200:hover {
  color: #1c1917;
}
:root:not(.dark) .for-page-surface .hover\:text-zinc-300:hover {
  color: #44403c;
}

/* Card gradient overlay */
:root:not(.dark) .for-page-surface .bg-gradient-to-br.from-primary\/\[0\.03\] {
  background: transparent;
}

/* Card subtle shadow on hover */
:root:not(.dark)
  .for-page-surface
  .hover\:shadow-\[0_24px_60px_-35px_rgba\(0\,0\,0\,0\.55\)\]:hover {
  box-shadow: 0 24px 60px -35px rgba(120, 116, 104, 0.35);
}

/* Red dot pulse badge in hero */
:root:not(.dark) .for-page-surface .bg-primary\/15 {
  background: rgba(239, 68, 68, 0.12);
}

/* Breadcrumb */
:root:not(.dark) .for-page-surface .hover\:text-zinc-300 {
  color: #787468;
}
:root:not(.dark) .for-page-surface .hover\:text-zinc-300:hover {
  color: #1c1917;
}

/* Chevron in breadcrumb */
:root:not(.dark) .for-page-surface .text-zinc-600 {
  color: #a8a08c;
}

/* FAQ component overrides */
:root:not(.dark) .for-page-surface .border-b.border-border {
  border-color: #ddd8cc;
}

/* Related links section headers */
:root:not(.dark) .for-page-surface .font-semibold.text-zinc-300 {
  color: #44403c;
}

/* ── Integrations Page Light Theme ── */
:root:not(.dark) .integrations-page-surface {
  --background: #f8f6f1;
  --foreground: #1a1a1e;
  --muted: #eae6de;
  --muted-foreground: #5a564f;
  --border: #d6d0c4;
  --input: #d6d0c4;
  --ring: #1a1a1e;
  --primary: #c34242;
  --primary-foreground: #ffffff;
  --secondary: #e2ddd2;
  --secondary-foreground: #1a1a1e;
  --accent: #ddd8cc;
  --accent-foreground: #1a1a1e;
  --card: #ffffff;
  --card-foreground: #1a1a1e;
  --popover: #ffffff;
  --popover-foreground: #1a1a1e;
  --sidebar: #f8f6f1;
  --sidebar-foreground: #1a1a1e;
  --sidebar-border: #d6d0c4;
  --link: #8f1d1d;
  --accent-warm: #d97706;
  --accent-warm-muted: rgba(217, 119, 6, 0.12);
  --surface-elevated: rgba(255, 255, 255, 0.85);
  --glow-primary: rgba(195, 66, 66, 0.1);
  --glow-warm: rgba(217, 119, 6, 0.06);
  background:
    radial-gradient(ellipse at 15% 10%, rgba(195, 66, 66, 0.05), transparent 40%),
    radial-gradient(ellipse at 85% 20%, rgba(217, 119, 6, 0.04), transparent 35%),
    linear-gradient(180deg, #f8f6f1 0%, #f5f2ea 50%, #f8f6f1 100%);
}

:root:not(.dark) .integrations-page-surface .int-hero-badge {
  background: rgba(195, 66, 66, 0.08);
  color: #8f1d1d;
  border-color: rgba(195, 66, 66, 0.15);
}

:root:not(.dark) .integrations-page-surface .int-card {
  background: #ffffff;
  border-color: #d6d0c4;
}

:root:not(.dark) .integrations-page-surface .int-card:hover {
  border-color: #c34242;
  box-shadow: 0 1px 4px rgba(195, 66, 66, 0.08);
}

:root:not(.dark) .integrations-page-surface .int-icon-box {
  background: rgba(195, 66, 66, 0.07);
}

:root:not(.dark) .integrations-page-surface .int-icon-box svg {
  color: #c34242;
}

:root:not(.dark) .integrations-page-surface .int-badge {
  background: #eae6de;
  border-color: #d6d0c4;
  color: #5a564f;
}

:root:not(.dark) .integrations-page-surface .int-step-circle {
  background: #c34242;
  color: #ffffff;
}

:root:not(.dark) .integrations-page-surface .int-cta-section {
  background: #ffffff;
  border-color: #d6d0c4;
}

:root:not(.dark) .integrations-page-surface .int-cta-outline {
  border-color: #d6d0c4;
  color: #1a1a1e;
}

:root:not(.dark) .integrations-page-surface .int-cta-outline:hover {
  border-color: #c34242;
  background: rgba(195, 66, 66, 0.04);
}

:root:not(.dark) .integrations-page-surface .int-request-card {
  background: #ffffff;
  border-color: #d6d0c4;
}

:root:not(.dark) .integrations-page-surface .int-muted-text {
  color: #5a564f;
}

:root:not(.dark) .integrations-page-surface .int-link {
  color: #5a564f;
}

:root:not(.dark) .integrations-page-surface .int-link:hover {
  color: #1a1a1e;
}

:root:not(.dark) .integrations-page-surface .int-connector-line {
  border-color: #d6d0c4;
}

:root:not(.dark) .integrations-page-surface .int-geo-section {
  border-color: #d6d0c4;
}

/* Geo trust block adjustments for integrations light theme */
:root:not(.dark) .integrations-page-surface [class*="bg-zinc-950"],
:root:not(.dark) .integrations-page-surface [class*="bg-zinc-900"] {
  background: #ffffff;
}

:root:not(.dark) .integrations-page-surface [class*="text-zinc-100"],
:root:not(.dark) .integrations-page-surface [class*="text-zinc-200"],
:root:not(.dark) .integrations-page-surface .text-white {
  color: #1a1a1e;
}

:root:not(.dark) .integrations-page-surface .int-meta-count {
  color: #8a8680;
}

:root:not(.dark) .integrations-page-surface .int-divider {
  border-color: #eae6de;
}

/* Skeleton animation */
:root:not(.dark) .for-page-surface .animate-pulse.bg-zinc-800 {
  background: #ece7dd;
}

/* Gradient hero on detail page */
:root:not(.dark) .for-page-surface .bg-gradient-to-br.from-zinc-950 {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(239, 68, 68, 0.06), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(217, 119, 6, 0.04), transparent 40%),
    linear-gradient(135deg, #f5f2ea 0%, #f7f5ef 50%, #f5f2ea 100%);
}

:root:not(.dark)
  .for-page-surface
  .bg-\[radial-gradient\(ellipse_at_top_right\,rgba\(239\,68\,68\,0\.10\)\,transparent_60\%\)\] {
  background: radial-gradient(ellipse at top right, rgba(239, 68, 68, 0.08), transparent 60%);
}

:root:not(.dark)
  .for-page-surface
  .bg-\[radial-gradient\(ellipse_at_bottom_left\,rgba\(59\,130\,246\,0\.06\)\,transparent_50\%\)\] {
  background: radial-gradient(ellipse at bottom left, rgba(217, 119, 6, 0.06), transparent 50%);
}

/* ── Integrations detail page light theme ──────────────────────────── */

:root:not(.dark) .integrations-detail-surface {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.06), transparent 32%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.04), transparent 26%),
    linear-gradient(180deg, #faf8f3 0%, #f5f2ea 48%, #faf8f3 100%);
}

:root:not(.dark) .integrations-detail-surface ::selection {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

:root:not(.dark) .integrations-detail-surface .text-white {
  color: #1a1a1e;
}
:root:not(.dark) .integrations-detail-surface .text-zinc-100 {
  color: #27272a;
}
:root:not(.dark) .integrations-detail-surface .text-zinc-200 {
  color: #27272a;
}
:root:not(.dark) .integrations-detail-surface .text-zinc-300 {
  color: #3f3f46;
}
:root:not(.dark) .integrations-detail-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .integrations-detail-surface .text-zinc-500 {
  color: #71717a;
}
:root:not(.dark) .integrations-detail-surface .text-zinc-600 {
  color: #52525b;
}
:root:not(.dark) .integrations-detail-surface .text-red-400 {
  color: #dc2626;
}
:root:not(.dark) .integrations-detail-surface .text-amber-300 {
  color: #d97706;
}
:root:not(.dark) .integrations-detail-surface .text-emerald-400 {
  color: #059669;
}

:root:not(.dark) .integrations-detail-surface,
:root:not(.dark) .integrations-detail-surface .bg-zinc-950,
:root:not(.dark) .integrations-detail-surface .bg-zinc-950\/70,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/90,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/80,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/60,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/50,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/40,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/30,
:root:not(.dark) .integrations-detail-surface .bg-zinc-900\/20,
:root:not(.dark) .integrations-detail-surface .bg-zinc-800 {
  background: transparent;
}

:root:not(.dark) .integrations-detail-surface .border-zinc-800 {
  border-color: #e4e4e7;
}
:root:not(.dark) .integrations-detail-surface .border-zinc-800\/60 {
  border-color: #e4e4e7;
}
:root:not(.dark) .integrations-detail-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .integrations-detail-surface .border-zinc-700\/60 {
  border-color: #d4d4d8;
}
:root:not(.dark) .integrations-detail-surface .border-zinc-600 {
  border-color: #a1a1aa;
}

:root:not(.dark) .integrations-detail-surface .hover\:text-zinc-300:hover {
  color: #3f3f46;
}
:root:not(.dark) .integrations-detail-surface .hover\:bg-zinc-800:hover {
  background: #f5f2ea;
}

:root:not(.dark) .integrations-detail-surface .bg-zinc-800 {
  background: #ffffff;
}

:root:not(.dark) .integrations-detail-surface .rounded-full.border.border-zinc-700 {
  background: #ffffff;
  border-color: #d4d4d8;
}

/* ── Features detail page light theme ──────────────────────────────── */

:root:not(.dark) .features-detail-surface {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.06), transparent 32%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.04), transparent 26%),
    linear-gradient(180deg, #faf8f3 0%, #f5f2ea 48%, #faf8f3 100%);
}

:root:not(.dark) .features-detail-surface ::selection {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

:root:not(.dark) .features-detail-surface .text-white {
  color: #1a1a1e;
}
:root:not(.dark) .features-detail-surface .text-zinc-100 {
  color: #27272a;
}
:root:not(.dark) .features-detail-surface .text-zinc-200 {
  color: #27272a;
}
:root:not(.dark) .features-detail-surface .text-zinc-300 {
  color: #3f3f46;
}
:root:not(.dark) .features-detail-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .features-detail-surface .text-zinc-500 {
  color: #71717a;
}
:root:not(.dark) .features-detail-surface .text-zinc-600 {
  color: #52525b;
}
:root:not(.dark) .features-detail-surface .text-red-400 {
  color: #dc2626;
}
:root:not(.dark) .features-detail-surface .text-red-300 {
  color: #b91c1c;
}

:root:not(.dark) .features-detail-surface,
:root:not(.dark) .features-detail-surface .bg-zinc-950,
:root:not(.dark) .features-detail-surface .bg-zinc-950\/70,
:root:not(.dark) .features-detail-surface .bg-zinc-900,
:root:not(.dark) .features-detail-surface .bg-zinc-900\/90,
:root:not(.dark) .features-detail-surface .bg-zinc-900\/80,
:root:not(.dark) .features-detail-surface .bg-zinc-900\/60,
:root:not(.dark) .features-detail-surface .bg-zinc-900\/50,
:root:not(.dark) .features-detail-surface .bg-zinc-900\/40,
:root:not(.dark) .features-detail-surface .bg-zinc-900\/30 {
  background: transparent;
}

:root:not(.dark) .features-detail-surface .border-zinc-800 {
  border-color: #e4e4e7;
}
:root:not(.dark) .features-detail-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .features-detail-surface .border-zinc-700\/60 {
  border-color: #d4d4d8;
}
:root:not(.dark) .features-detail-surface .border-zinc-600 {
  border-color: #a1a1aa;
}

:root:not(.dark) .features-detail-surface .hover\:text-zinc-300:hover {
  color: #3f3f46;
}

:root:not(.dark) .features-detail-surface .bg-zinc-800 {
  background: #ffffff;
}

:root:not(.dark)
  .features-detail-surface
  .bg-\[radial-gradient\(ellipse_80\%_50\%_at_50\%_-20\%\,rgba\(220\,38\,38\,0\.12\)\,transparent\)\] {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(220, 38, 38, 0.08), transparent);
}

/* ── Customers page light theme ────────────────────────────────────── */

:root:not(.dark) .customers-page-surface {
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.06), transparent 32%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.04), transparent 26%),
    linear-gradient(180deg, #faf8f3 0%, #f5f2ea 48%, #faf8f3 100%);
}

:root:not(.dark) .customers-page-surface ::selection {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

:root:not(.dark) .customers-page-surface .text-white {
  color: #1a1a1e;
}
:root:not(.dark) .customers-page-surface .text-zinc-100 {
  color: #27272a;
}
:root:not(.dark) .customers-page-surface .text-zinc-200 {
  color: #27272a;
}
:root:not(.dark) .customers-page-surface .text-zinc-300 {
  color: #3f3f46;
}
:root:not(.dark) .customers-page-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .customers-page-surface .text-zinc-500 {
  color: #71717a;
}
:root:not(.dark) .customers-page-surface .text-zinc-600 {
  color: #52525b;
}
:root:not(.dark) .customers-page-surface .text-red-400 {
  color: #dc2626;
}
:root:not(.dark) .customers-page-surface .text-red-300 {
  color: #b91c1c;
}

:root:not(.dark) .customers-page-surface,
:root:not(.dark) .customers-page-surface .bg-zinc-950,
:root:not(.dark) .customers-page-surface .bg-zinc-950\/80,
:root:not(.dark) .customers-page-surface .bg-zinc-950\/60,
:root:not(.dark) .customers-page-surface .bg-zinc-900,
:root:not(.dark) .customers-page-surface .bg-zinc-900\/60,
:root:not(.dark) .customers-page-surface .bg-zinc-900\/50,
:root:not(.dark) .customers-page-surface .bg-zinc-900\/40,
:root:not(.dark) .customers-page-surface .bg-zinc-900\/30,
:root:not(.dark) .customers-page-surface .bg-zinc-900\/20 {
  background: transparent;
}

:root:not(.dark) .customers-page-surface .border-zinc-800 {
  border-color: #e4e4e7;
}
:root:not(.dark) .customers-page-surface .border-zinc-800\/60 {
  border-color: #e4e4e7;
}
:root:not(.dark) .customers-page-surface .border-zinc-800\/40 {
  border-color: rgba(228, 228, 231, 0.4);
}
:root:not(.dark) .customers-page-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .customers-page-surface .border-zinc-700\/50 {
  border-color: rgba(212, 212, 216, 0.5);
}
:root:not(.dark) .customers-page-surface .border-zinc-600 {
  border-color: #a1a1aa;
}

:root:not(.dark) .customers-page-surface .hover\:text-zinc-300:hover {
  color: #3f3f46;
}
:root:not(.dark) .customers-page-surface .hover\:text-red-400:hover {
  color: #dc2626;
}
:root:not(.dark) .customers-page-surface .hover\:bg-zinc-900\/40:hover {
  background: #f5f2ea;
}
:root:not(.dark) .customers-page-surface .hover\:border-zinc-700\/50:hover {
  border-color: #d4d4d8;
}

:root:not(.dark) .customers-page-surface .bg-zinc-800 {
  background: #ffffff;
}

:root:not(.dark)
  .customers-page-surface
  .bg-\[radial-gradient\(ellipse_80\%_50\%_at_50\%_-20\%\,rgba\(220\,38\,38\,0\.12\)\,transparent\)\] {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(220, 38, 38, 0.08), transparent);
}

/* ── Checkout page light theme ─────────────────────────────────────── */

:root:not(.dark) .checkout-surface {
  --checkout-card: #ffffff;
  --checkout-card-border: #e4e4e7;
  --checkout-card-glow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --checkout-trust-bg: rgba(228, 228, 231, 0.5);
  --checkout-trust-text: #52525b;
  --checkout-accent-red: #dc2626;
  --checkout-accent-amber: #d97706;
  --checkout-accent-emerald: #059669;
  --checkout-accent-violet: #7c3aed;
  --checkout-timeline-ring: #f5f2ea;
  --checkout-muted-subtle: #a1a1aa;
  --checkout-gradient-card: linear-gradient(180deg, #ffffff, #faf8f3);
  --checkout-gradient-card-hover: linear-gradient(180deg, #ffffff, #f7f4ec);
  --checkout-feature-row-hover: rgba(228, 228, 231, 0.4);
  --checkout-info-bg: #f5f2ea;
  --checkout-price-text: #1a1a1e;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(239, 68, 68, 0.05), transparent 38%),
    radial-gradient(ellipse at 80% 20%, rgba(217, 119, 6, 0.04), transparent 30%),
    linear-gradient(180deg, #faf8f3 0%, #f5f2ea 50%, #faf8f3 100%);
}

:root:not(.dark) .checkout-surface ::selection {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

/* Text colors */
:root:not(.dark) .checkout-surface .text-white {
  color: #1a1a1e;
}
:root:not(.dark) .checkout-surface .text-zinc-100 {
  color: #27272a;
}
:root:not(.dark) .checkout-surface .text-zinc-200 {
  color: #27272a;
}
:root:not(.dark) .checkout-surface .text-zinc-300 {
  color: #3f3f46;
}
:root:not(.dark) .checkout-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .checkout-surface .text-zinc-500 {
  color: #71717a;
}
:root:not(.dark) .checkout-surface .text-zinc-600 {
  color: #52525b;
}
:root:not(.dark) .checkout-surface .text-red-400 {
  color: #dc2626;
}
:root:not(.dark) .checkout-surface .text-red-300 {
  color: #dc2626;
}
:root:not(.dark) .checkout-surface .text-amber-300 {
  color: #d97706;
}
:root:not(.dark) .checkout-surface .text-amber-400 {
  color: #d97706;
}
:root:not(.dark) .checkout-surface .text-emerald-400 {
  color: #059669;
}
:root:not(.dark) .checkout-surface .text-violet-400 {
  color: #7c3aed;
}

/* Kill dark backgrounds — make translucent zinc layers light */
:root:not(.dark) .checkout-surface,
:root:not(.dark) .checkout-surface .bg-zinc-950,
:root:not(.dark) .checkout-surface .bg-zinc-950\/70,
:root:not(.dark) .checkout-surface .bg-zinc-950\/40,
:root:not(.dark) .checkout-surface .bg-zinc-900,
:root:not(.dark) .checkout-surface .bg-zinc-900\/90,
:root:not(.dark) .checkout-surface .bg-zinc-900\/80,
:root:not(.dark) .checkout-surface .bg-zinc-900\/70,
:root:not(.dark) .checkout-surface .bg-zinc-900\/60,
:root:not(.dark) .checkout-surface .bg-zinc-900\/50,
:root:not(.dark) .checkout-surface .bg-zinc-900\/40,
:root:not(.dark) .checkout-surface .bg-zinc-900\/30 {
  background: transparent;
}

/* Card backgrounds — gradient white */
:root:not(.dark)
  .checkout-surface
  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.045\)\,rgba\(255\,255\,255\,0\.015\)\)\] {
  background: var(--checkout-gradient-card);
}
:root:not(.dark)
  .checkout-surface
  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.035\)\,rgba\(255\,255\,255\,0\.01\)\)\] {
  background: var(--checkout-gradient-card);
}
:root:not(.dark) .checkout-surface .hover\:bg-white\/\[0\.015\]:hover {
  background: var(--checkout-gradient-card-hover);
}

/* Feature card hover states */
:root:not(.dark) .checkout-surface .hover\:border-white\/\[0\.10\]:hover {
  border-color: #d4d4d8;
}
:root:not(.dark) .checkout-surface .hover\:bg-white\/\[0\.03\]:hover {
  background: var(--checkout-feature-row-hover);
}

/* Feature row backgrounds */
:root:not(.dark) .checkout-surface .bg-white\/\[0\.02\] {
  background: rgba(228, 228, 231, 0.3);
}
:root:not(.dark) .checkout-surface .bg-white\/\[0\.03\] {
  background: rgba(228, 228, 231, 0.4);
}

/* Info box */
:root:not(.dark) .checkout-surface .bg-zinc-950\/40 {
  background: var(--checkout-info-bg);
}

/* Borders */
:root:not(.dark) .checkout-surface .border-zinc-800 {
  border-color: #e4e4e7;
}
:root:not(.dark) .checkout-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .checkout-surface .border-zinc-600 {
  border-color: #a1a1aa;
}
:root:not(.dark) .checkout-surface .border-white\/\[0\.06\] {
  border-color: #e4e4e7;
}
:root:not(.dark) .checkout-surface .border-white\/\[0\.10\] {
  border-color: #d4d4d8;
}
:root:not(.dark) .checkout-surface .border-white\/\[0\.05\] {
  border-color: #e4e4e7;
}

/* Trust pill backgrounds */
:root:not(.dark) .checkout-surface .bg-black\/20 {
  background: var(--checkout-trust-bg);
}

/* Shadows */
:root:not(.dark) .checkout-surface .shadow-2xl.shadow-black\/30 {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
:root:not(.dark)
  .checkout-surface
  .shadow-\[0_1px_0_rgba\(0\,0\,0\,0\.03\)\,0_24px_70px_-45px_rgba\(0\,0\,0\,0\.45\)\] {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.03),
    0 24px 70px -45px rgba(0, 0, 0, 0.08);
}
:root:not(.dark) .checkout-surface .shadow-lg.shadow-red-600\/20 {
  box-shadow: 0 1px 6px rgba(220, 38, 38, 0.12);
}

/* Timeline dots ring */
:root:not(.dark) .checkout-surface .ring-\[6px\].ring-\[\#09090b\] {
  --tw-ring-color: var(--checkout-timeline-ring);
}

/* Timeline dot colors */
:root:not(.dark) .checkout-surface .bg-zinc-700 {
  background: #d4d4d8;
}
:root:not(.dark) .checkout-surface .bg-zinc-600 {
  background: #a1a1aa;
}

/* Timeline gradient line */
:root:not(.dark) .checkout-surface .bg-gradient-to-b.from-red-500\/30 {
  opacity: 0.4;
}

/* Icon box backgrounds */
:root:not(.dark) .checkout-surface .bg-red-500\/10 {
  background: rgba(220, 38, 38, 0.07);
}
:root:not(.dark) .checkout-surface .bg-red-500\/\[0\.08\] {
  background: rgba(220, 38, 38, 0.06);
}
:root:not(.dark) .checkout-surface .bg-red-500\/\[0\.06\] {
  background: rgba(220, 38, 38, 0.04);
}
:root:not(.dark) .checkout-surface .bg-emerald-500\/10 {
  background: rgba(5, 150, 105, 0.08);
}
:root:not(.dark) .checkout-surface .bg-emerald-500\/\[0\.08\] {
  background: rgba(5, 150, 105, 0.06);
}
:root:not(.dark) .checkout-surface .bg-emerald-500\/\[0\.06\] {
  background: rgba(5, 150, 105, 0.05);
}
:root:not(.dark) .checkout-surface .bg-amber-500\/\[0\.08\] {
  background: rgba(217, 119, 6, 0.07);
}
:root:not(.dark) .checkout-surface .bg-amber-500\/10 {
  background: rgba(217, 119, 6, 0.08);
}
:root:not(.dark) .checkout-surface .bg-amber-500\/\[0\.06\] {
  background: rgba(217, 119, 6, 0.05);
}
:root:not(.dark) .checkout-surface .bg-violet-500\/\[0\.04\] {
  background: rgba(124, 58, 237, 0.06);
}

/* Accent borders */
:root:not(.dark) .checkout-surface .border-red-500\/20 {
  border-color: rgba(220, 38, 38, 0.12);
}
:root:not(.dark) .checkout-surface .border-red-500\/15 {
  border-color: rgba(220, 38, 38, 0.1);
}
:root:not(.dark) .checkout-surface .border-red-500\/\[0\.04\] {
  border-color: rgba(220, 38, 38, 0.06);
}
:root:not(.dark) .checkout-surface .border-emerald-500\/20 {
  border-color: rgba(5, 150, 105, 0.12);
}
:root:not(.dark) .checkout-surface .border-emerald-500\/15 {
  border-color: rgba(5, 150, 105, 0.1);
}
:root:not(.dark) .checkout-surface .border-amber-500\/20 {
  border-color: rgba(217, 119, 6, 0.12);
}
:root:not(.dark) .checkout-surface .border-amber-500\/15 {
  border-color: rgba(217, 119, 6, 0.1);
}
:root:not(.dark) .checkout-surface .border-violet-500\/20 {
  border-color: rgba(124, 58, 237, 0.12);
}

/* Accent ring — icon box */
:root:not(.dark) .checkout-surface .ring-1.ring-red-500\/10 {
  --tw-ring-color: rgba(220, 38, 38, 0.08);
}

/* Glow pseudo-elements — soften for light */
:root:not(.dark) .checkout-surface .bg-red-500\/8 {
  opacity: 0.35;
}
:root:not(.dark) .checkout-surface .bg-emerald-500\/8 {
  opacity: 0.3;
}

/* Error section */
:root:not(.dark) .checkout-surface .border-red-500\/20.bg-red-500\/\[0\.06\] {
  background: rgba(220, 38, 38, 0.04);
  border-color: rgba(220, 38, 38, 0.12);
}
:root:not(.dark) .checkout-surface .border-red-400\/20 {
  border-color: rgba(220, 38, 38, 0.15);
}
:root:not(.dark) .checkout-surface .bg-transparent.text-red-300 {
  color: #dc2626;
}
:root:not(.dark) .checkout-surface .hover\:bg-red-500\/\[0\.08\]:hover {
  background: rgba(220, 38, 38, 0.06);
}
:root:not(.dark) .checkout-surface .hover\:text-red-200:hover {
  color: #b91c1c;
}

/* Price display */
:root:not(.dark) .checkout-surface .text-6xl.font-black.tracking-tighter.text-white {
  color: var(--checkout-price-text);
}

/* Value badge in feature rows */
:root:not(.dark) .checkout-surface .border-white\/\[0\.06\].bg-white\/\[0\.03\] {
  background: rgba(228, 228, 231, 0.4);
  border-color: #d4d4d8;
}

/* Loading spinner */
:root:not(.dark) .checkout-surface .text-red-400 {
  color: #dc2626;
}

/* After-trial badge */
:root:not(.dark) .checkout-surface .border-emerald-500\/20.bg-emerald-500\/\[0\.08\] {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.12);
}

/* Features section header */
:root:not(.dark) .checkout-surface .border-red-500\/15.bg-red-500\/\[0\.08\] {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.1);
}

/* Emoji/text indicator */
:root:not(.dark) .checkout-surface .text-emerald-500 {
  color: #059669;
}

/* "After the trial" check circles */
:root:not(.dark) .checkout-surface .bg-emerald-500\/10 {
  background: rgba(5, 150, 105, 0.08);
}

/* Outline button on no-intent state */
:root:not(.dark) .checkout-surface .border-white\/\[0\.10\].hover\:bg-white\/\[0\.05\]:hover {
  background: rgba(228, 228, 231, 0.4);
}

/* Dashes for missing features */
:root:not(.dark) .checkout-surface .text-zinc-600 {
  color: #a1a1aa;
}

/* Card accent border from tierAccent */
:root:not(.dark) .checkout-surface .border-emerald-500\/20 {
  border-color: rgba(5, 150, 105, 0.12);
}
:root:not(.dark) .checkout-surface .border-red-500\/20 {
  border-color: rgba(220, 38, 38, 0.12);
}
:root:not(.dark) .checkout-surface .border-violet-500\/20 {
  border-color: rgba(124, 58, 237, 0.12);
}

/* ── Blog Detail Page Light Theme ── */
:root:not(.dark) .blog-detail-surface {
  --blog-detail-card: #ffffff;
  --blog-detail-card-border: #e4e4e7;
  --blog-detail-muted: #71717a;
  --blog-detail-muted-bg: rgba(113, 113, 122, 0.08);
}

:root:not(.dark) .blog-detail-surface .bg-zinc-500\/10 {
  background: var(--blog-detail-muted-bg);
}
:root:not(.dark) .blog-detail-surface .text-zinc-500 {
  color: var(--blog-detail-muted);
}
:root:not(.dark) .blog-detail-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .blog-detail-surface .text-zinc-300\/80 {
  color: #3f3f46;
}
:root:not(.dark) .blog-detail-surface .bg-zinc-900 {
  background: var(--blog-detail-card);
}
:root:not(.dark) .blog-detail-surface .hover\:bg-zinc-800:hover {
  background: #f4f4f5;
}
:root:not(.dark) .blog-detail-surface .from-zinc-900\/70,
:root:not(.dark) .blog-detail-surface .to-zinc-950 {
  background: transparent;
}
:root:not(.dark) .blog-detail-surface .border-zinc-800\/80,
:root:not(.dark) .blog-detail-surface .border-zinc-800 {
  border-color: var(--blog-detail-card-border);
}
:root:not(.dark) .blog-detail-surface .bg-zinc-950\/70 {
  background: #fafaf9;
}
:root:not(.dark) .blog-detail-surface .bg-zinc-950 {
  background: transparent;
}
:root:not(.dark) .blog-detail-surface .hover\:border-red-500\/25:hover {
  border-color: rgba(220, 38, 38, 0.2);
}
:root:not(.dark) .blog-detail-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .blog-detail-surface .hover\:bg-zinc-800:hover {
  background: #f4f4f5;
}
:root:not(.dark) .blog-detail-surface .via-zinc-900 {
  background: transparent;
}
:root:not(.dark) .blog-detail-surface .text-white {
  color: #1a1a1e;
}

:root:not(.dark) .blog-detail-surface .bg-gradient-to-b.from-zinc-900\/70.to-zinc-950 {
  background: linear-gradient(180deg, #ffffff, #f5f2ea);
}
:root:not(.dark) .blog-detail-surface .bg-gradient-to-br.from-red-500\/10.via-zinc-900.to-zinc-950 {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #fafaf9, #ffffff);
}

:root:not(.dark) .blog-detail-surface .bg-gradient-to-b.from-red-500.to-red-600 {
  background: linear-gradient(180deg, #dc2626, #b91c1c);
}
:root:not(.dark) .blog-detail-surface .shadow-lg.shadow-red-500\/25 {
  box-shadow: 0 1px 6px rgba(220, 38, 38, 0.12);
}
:root:not(.dark) .blog-detail-surface .hover\:shadow-red-500\/40:hover {
  box-shadow: 0 1px 8px rgba(220, 38, 38, 0.16);
}

/* ── Features Detail Page Light Theme (expand existing surface) ── */
:root:not(.dark) .features-detail-surface .bg-zinc-950 {
  background: transparent;
}
:root:not(.dark) .features-detail-surface .bg-zinc-900 {
  background: #ffffff;
}
:root:not(.dark) .features-detail-surface .bg-zinc-900\/50 {
  background: #ffffff;
}
:root:not(.dark) .features-detail-surface .text-white {
  color: #1a1a1e;
}
:root:not(.dark) .features-detail-surface .text-zinc-400 {
  color: #52525b;
}
:root:not(.dark) .features-detail-surface .text-zinc-300 {
  color: #3f3f46;
}
:root:not(.dark) .features-detail-surface .text-zinc-100 {
  color: #27272a;
}
:root:not(.dark) .features-detail-surface .border-zinc-800 {
  border-color: #e4e4e7;
}
:root:not(.dark) .features-detail-surface .border-zinc-700 {
  border-color: #d4d4d8;
}
:root:not(.dark) .features-detail-surface .bg-zinc-950\/50 {
  background: #fafaf9;
}
:root:not(.dark) .features-detail-surface .hover\:bg-zinc-800\/50:hover {
  background: #f4f4f5;
}