/*
=====================================================
  /public/css/pages/pricing.css
  V2 — Visual makeover: high-converting SaaS pricing page
=====================================================
*/

/* 1. Page Globals & Layout
----------------------------------------------------- */
.pricing-page {
  background-color: var(--color-slate-50);
}

/* Remove body's header-clearance padding on pricing — the hero
   extends behind the fixed header, its internal padding clears content.
   !important needed because JS sets padding-top as inline style. */
@media (max-width: 991px) {
  body.pricing-page {
    padding-top: 0 !important;
  }
}

/* Hero & CTA are outside .page-container (direct children of .member-main)
   so they only need to break past member-main's 12px padding for full-bleed.
   No overflow-x hacks needed. */

/* Page-container override: pricing needs 1280px for the comparison table */
.pricing-page .page-container {
  max-width: 1280px;
}

/* 2. Hero Section — Inherits gradient from page-header--sales component.
   Adds premium shadow and decorative overlays specific to pricing. */
.pricing-page .page-header--pricing-hero {
  padding: var(--space-12) var(--space-8) var(--space-10);
  margin-bottom: var(--space-2);
  box-shadow: 0 20px 60px -15px rgba(67, 56, 202, 0.4);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative pattern overlay */
.pricing-page .page-header--pricing-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.pricing-page .page-header--pricing-hero .page-header__title {
  color: #fff;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.pricing-page .page-header--pricing-hero .page-header__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-lg);
  max-width: 600px;
  margin: var(--space-4) auto 0;
  line-height: 1.6;
}

/* Hero social proof — white text on gradient */
.pricing-page .pricing-hero-proof__stat {
  color: rgba(255, 255, 255, 0.7);
}
.pricing-page .pricing-hero-proof__stat strong {
  color: #fff;
}
.pricing-page .pricing-hero-proof__stat i {
  color: rgba(255, 255, 255, 0.5);
}
.pricing-page .pricing-hero-proof__divider {
  background: rgba(255, 255, 255, 0.2);
}

/* Desktop: hero & CTA live outside .page-container, so constrain them
   to the same content width the page-container would have given (1280px - 2*24px gutter) */
@media (min-width: 992px) {
  .pricing-page .page-header--pricing-hero,
  .pricing-page .pricing-final-cta {
    max-width: calc(1280px - var(--page-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Reduce gap between hero and trust strip */
.pricing-page .page-header--sales {
  margin-bottom: var(--space-2);
}
/* Override the generic page-header padding but NOT the hero's own padding */
.pricing-page .page-header {
  padding-bottom: 0;
}
/* Ensure the hero's bottom padding is respected (specificity override) */
.pricing-page .page-header.page-header--pricing-hero {
  padding-bottom: var(--space-10);
}

/* 3. Trust Strip — Inherits pill badges from shared component (page-header.css).
   No page-specific overrides needed. */

/* 4. Billing Toggle — Larger, more prominent
----------------------------------------------------- */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  padding: 5px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.billing-toggle__btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-toggle__btn--active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.billing-toggle__btn:hover:not(.billing-toggle__btn--active) {
  color: var(--color-gray-800);
  background: var(--color-gray-50);
}

.billing-toggle__save {
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
}

/* When active (yearly selected), the save badge adjusts */
.billing-toggle__btn--active .billing-toggle__save {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Yearly price & billing note display */
.yearly-billed-note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* 5. Trust & Guarantee Section (Bottom)
----------------------------------------------------- */
.trust-stack {
  padding: var(--space-6) 0 var(--space-4);
  text-align: center;
}

.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-full);
  color: #166534;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.08);
}
.guarantee-badge i {
  color: #16a34a;
  font-size: 1.1rem;
}

.payment-logos-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.payment-methods-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.payment-methods__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.payment-methods__logos {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.payment-methods__logos img {
  height: 24px;
  opacity: 0.6;
  transition: opacity 150ms ease;
  filter: grayscale(30%);
}

.payment-methods__logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.currency-disclaimer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-slate-500);
  background: var(--color-slate-100);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* 6. Feature Value Type Styles (comparison table cells)
----------------------------------------------------- */
.highlight-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.feature-value--muted {
  color: var(--color-slate-400);
  font-size: var(--font-size-sm);
}

.feature-value--active {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.feature-value--unlimited {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.feature-value--elite {
  color: #7c3aed;
  font-weight: var(--font-weight-semibold);
}

/* 7. Current Plan Label (non-clickable)
----------------------------------------------------- */
.current-plan-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  cursor: default;
}
.current-plan-label i {
  font-size: 1rem;
}

/* 8. Tooltips
----------------------------------------------------- */
.pricing-tip-icon {
  font-size: var(--font-size-sm);
  color: var(--color-slate-400);
  cursor: help;
  margin-left: 2px;
}
.pricing-tip-icon:hover { color: var(--color-primary); }

.pricing-tip {
  position: fixed; width: 280px; max-width: calc(100vw - 16px);
  background: var(--color-slate-800); color: var(--color-slate-100);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm); line-height: 1.5; box-shadow: var(--shadow-xl);
  z-index: 2000; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  transform: translateY(-10px);
}
.pricing-tip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pricing-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--color-slate-800);
}

/* 9. Desktop table: 3 columns (Free removed)
----------------------------------------------------- */
.feature-comparison-table th.plan-header-cell,
.feature-comparison-table td.feature-value-cell,
.feature-comparison-table td.plan-footer-cell {
  width: 22%;
}
.feature-comparison-table th.feature-header-cell,
.feature-comparison-table td.feature-name-cell {
  width: 34%;
}

/* Pro column daily price emphasis */
.plan-daily-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-top: 4px;
}

.pricing-card__daily-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-top: 2px;
}

/* Recommended badge variant */
.plan-header-badge--recommended {
  background: var(--color-primary) !important;
  color: white !important;
}

/* =================================================================
   Pricing Table Footer & Border Polish
   ================================================================= */

/* 1. Wrapper Fix */
.feature-table-responsive-wrapper {
  border-radius: var(--radius-xl);
  overflow: visible;
  border: none;
  background-color: transparent;
}

/* 2. The Table itself */
.feature-comparison-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  border-style: hidden;
  box-shadow: 0 0 0 1px var(--color-gray-200);
  border-radius: var(--radius-xl);
}

/* 3. Footer Cell Base Styles */
.feature-comparison-table tfoot td {
  background-color: var(--color-white);
  padding: var(--space-5) var(--space-3);
  border-top: 1px solid var(--color-gray-200);
  border-right: 1px solid var(--color-gray-200);
  text-align: center;
  vertical-align: middle;
}

.feature-comparison-table tfoot td:last-child {
  border-right: none;
}

/* 4. Pro Plan Footer Fix */
.feature-comparison-table tbody tr:last-child td.is-recommended {
  border-left: 2px solid var(--color-primary-dark);
  border-right: 2px solid var(--color-primary-dark);
  background-color: #f8f9ff;
}

.feature-comparison-table tfoot td.is-recommended {
  background-color: #f8f9ff;
  border-left: 2px solid var(--color-primary-dark);
  border-right: 2px solid var(--color-primary-dark);
  border-bottom: 2px solid var(--color-primary-dark);
  border-top: 1px solid var(--color-gray-200);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  position: relative;
  z-index: 20;
  box-shadow: 0 10px 15px -3px rgba(67, 56, 202, 0.12);
}

/* 5. Outer Corners */
.feature-comparison-table tfoot tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-xl);
}
.feature-comparison-table tfoot tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-xl);
}

/* 6. Button Alignment */
.plan-cta-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 5;
}

.plan-cta-bottom .upgrade-btn {
  width: 100%;
  justify-content: center;
  max-width: 180px;
}

.plan-cta-bottom .current-plan-label {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

/* --- Welcome Offer Banner --- */
.smart-callout--welcome-offer {
  background: #1e1b4b;
  border: 1px solid #4338ca;
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.smart-callout--welcome-offer .smart-callout__icon {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fbbf24;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.smart-callout--welcome-offer .smart-callout__title {
  color: #fff;
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.smart-callout--welcome-offer p {
  color: #e0e7ff;
  margin: 0;
  font-size: 0.95rem;
}

.smart-callout--welcome-offer .welcome-offer-timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 700;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  color: #fbbf24;
  margin-left: 4px;
  letter-spacing: 0.05em;
  display: inline-block;
  min-width: 80px;
  text-align: center;
}

/* 10. Mobile Sticky CTA Bar
----------------------------------------------------- */
.mobile-sticky-cta {
  display: none; /* JS controls visibility */
}

@media (max-width: 991px) {
  .mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--color-slate-200);
    padding: 12px 16px;
    z-index: 1500;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  }

  .mobile-sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
  }

  .mobile-sticky-cta__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-sticky-cta__plan {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-slate-900);
    line-height: 1.2;
  }

  .mobile-sticky-cta__price {
    font-size: 0.8rem;
    color: var(--color-slate-500);
  }

  .mobile-sticky-cta__btn {
    flex-shrink: 0;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  @keyframes sticky-cta-pulse {
    0%, 100% { box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 -4px 20px rgba(67, 56, 202, 0.25); }
  }
  .mobile-sticky-cta--animate {
    animation: sticky-cta-pulse 0.6s ease-in-out 2;
  }

  body.has-sticky-cta {
    padding-bottom: 72px;
  }

  /* On pricing page, the final CTA already accounts for sticky bar spacing
     with its own padding-bottom — no need for body padding too */
  body.pricing-page.has-sticky-cta {
    padding-bottom: 0;
  }

  body.has-sticky-cta .mobile-fab {
    bottom: 84px;
    transition: bottom 0.2s ease;
  }
}

/* 11. FAQ Section — Uses component library accordion
----------------------------------------------------- */
.pricing-faq {
  width: 100%;           /* CRITICAL: flex column children shrink-wrap without this */
  margin: 0;
  padding: var(--space-8) 0 var(--space-6);
}

.pricing-faq__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.pricing-faq__subtitle {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
}

/* Prevent accordion from resizing when opened —
   The accordion body uses grid-template-rows animation which can shift width
   if items have long text. Constraining the wrapper fixes this. */
.pricing-faq .accordion {
  width: 100%;
  max-width: 100%;
}

.pricing-faq .accordion__item {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.pricing-faq .accordion__item > summary {
  font-size: var(--font-size-base);
}

.pricing-faq .accordion__body-inner {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* 12. Free Tier Note
----------------------------------------------------- */
.pricing-free-note {
  text-align: center;
  padding: var(--space-4) var(--space-4);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}
.pricing-free-note p {
  margin: 0;
}
.pricing-free-note a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* 13. Desktop: Pro column pricing footer
----------------------------------------------------- */
.pricing-footer-note {
  text-align: center;
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* =================================================================
   RESPONSIVE: Mobile (< 992px)
   ================================================================= */
@media (max-width: 991px) {
  .mobile-pricing-stack {
    display: flex;
    flex-direction: column;
  }

  .mobile-pricing-stack .pricing-card.is-featured {
    order: -1;
  }

  /* On mobile pricing page, remove member-main's top/bottom padding.
     Top: hero extends behind the fixed header (its internal padding clears content).
     Bottom: the final CTA handles its own spacing for the sticky bar. */
  .pricing-page .member-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hero full-bleed on mobile — only breaks past .member-main's 12px (--space-3) padding.
     No page-container padding to overcome since hero is outside it. */
  .pricing-page .page-header--pricing-hero {
    padding: calc(var(--header-height, 56px) + var(--space-6)) var(--space-5) var(--space-6);
    border-radius: 0;
    margin: 0 calc(-1 * var(--space-3));
    width: calc(100% + var(--space-3) * 2);
    box-shadow: 0 8px 30px -10px rgba(67, 56, 202, 0.35);
  }

  .pricing-page .page-header--pricing-hero .page-header__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    color: #fff;
    text-shadow: none;
  }

  .pricing-page .page-header--pricing-hero .page-header__subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 0;
  }

  /* Trust strip: mobile compact inherited from shared component (page-header.css) */

  .pricing-faq {
    padding: var(--space-6) var(--space-3) var(--space-4);
  }
}

@media (max-width: 767px) {
  .billing-toggle__btn {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
  }

  /* Hero proof stats adapt to dark bg on mobile too */
  .pricing-page .pricing-hero-proof__stat {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
  }
  .pricing-page .pricing-hero-proof__stat strong {
    color: #fff;
  }
  .pricing-page .pricing-hero-proof__stat i {
    color: rgba(255, 255, 255, 0.5);
  }
}

/* 14. Final CTA Closer Section
----------------------------------------------------- */
.pricing-final-cta {
  text-align: center;
  width: 100%;
  padding: var(--space-10) var(--space-6);
  margin: var(--space-4) 0 0;
  background: linear-gradient(135deg, #312e81 0%, #4338CA 50%, #6366F1 100%);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
}

.pricing-final-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.pricing-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
  position: relative;
}

.pricing-final-cta__subtitle {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto var(--space-6);
  max-width: 500px;
  line-height: 1.5;
  position: relative;
}

.pricing-final-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 200ms ease;
  position: relative;
}

.pricing-final-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: var(--color-primary-dark);
  text-decoration: none;
}

.pricing-final-cta__note {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-3);
  position: relative;
}

@media (max-width: 991px) {
  /* CTA full-bleed on mobile — only breaks past .member-main's 12px side padding */
  .pricing-final-cta {
    padding: var(--space-8) var(--space-5);
    padding-bottom: calc(var(--space-8) + 60px);
    border-radius: 0;
    margin: 0 calc(-1 * var(--space-3));
    width: calc(100% + var(--space-3) * 2);
  }
}

/* =================================================================
   SOCIAL PROOF (legacy support)
   ================================================================= */
.pricing-social-proof {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: 0 var(--space-4) var(--space-4);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.pricing-social-proof__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}
.pricing-social-proof__stat strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-bold);
}
.pricing-social-proof__stat i {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

/* =================================================================
   OBJECTION HANDLERS (legacy support)
   ================================================================= */
.pricing-objection-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-4);
  max-width: 560px;
  margin: 0 auto;
}
.pricing-objection-row__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
}
.pricing-objection-row__item i {
  color: var(--color-success);
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 1rem;
}
.pricing-objection-row__item strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 992px) {
  .pricing-objection-row {
    flex-direction: row;
    max-width: 900px;
    text-align: center;
    justify-content: center;
  }
  .pricing-objection-row__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
  }
  .pricing-objection-row__item i {
    margin-top: 0;
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 767px) {
  .pricing-social-proof {
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-2);
  }
  .pricing-social-proof__stat {
    font-size: var(--font-size-xs);
  }
}

/* =================================================================
   14. "Every paid plan includes" — bonus strip
   Clean white surface, 5-benefit list. Flat design, no gradients.
   5 cards flow as 3+2 centered on wide, 2+2+1 centered on tablet,
   1 per row on mobile — no orphan-left rows.
   ================================================================= */
/* Subtext under a highlight value in a feature cell (e.g. "open at once"). */
.feature-value__subtext {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-gray-500);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

/* Currency disclaimer note — sits directly under the pricing table */
.pricing-currency-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: var(--space-4) auto var(--space-8);
  padding: 10px var(--space-4);
  font-size: 13px;
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}
.pricing-currency-note i {
  color: var(--color-primary);
  font-size: 14px;
}
.pricing-currency-note strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.pricing-includes-strip {
  width: 100%;
  margin: var(--space-6) 0;
  padding: var(--space-8) var(--space-6);
  background: #ffffff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pricing-includes-strip__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.pricing-includes-strip__eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: var(--color-gray-100);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pricing-includes-strip__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}
.pricing-includes-strip__subtitle {
  display: none;
}

.pricing-includes-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.pricing-include-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease,
              background 200ms ease;
}
.pricing-include-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: var(--color-gray-300);
}

.pricing-include-card__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--color-primary);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  font-size: 16px;
}
.pricing-include-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.pricing-include-card__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
  line-height: 1.3;
}
.pricing-include-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gray-600);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-include-card:hover {
    transform: none;
  }
}

/* =================================================================
   15. Free / Starter card (separate spotlight below the paid table)
   ================================================================= */
.pricing-free-card {
  max-width: 580px;
  margin: var(--space-6) auto var(--space-10);
  padding: var(--space-8) var(--space-8) var(--space-6);
  background: #ffffff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  text-align: center;
}
.pricing-free-card__header {
  margin: 0 0 var(--space-6);
  padding-top: var(--space-2);
}
.pricing-free-card__header .pricing-free-card__tag {
  margin-top: 0;
}
.pricing-free-card__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.pricing-free-card__title {
  margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}
.pricing-free-card__subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.pricing-free-card__features {
  list-style: none;
  margin: 0 auto var(--space-6);
  padding: 0;
  max-width: 460px;
  text-align: left;
}
.pricing-free-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  line-height: 1.5;
}
.pricing-free-card__features li i {
  flex: 0 0 auto;
  width: 16px;
  color: var(--color-success, #16a34a);
  margin-top: 4px;
}
.pricing-free-card__cta {
  margin-top: var(--space-3);
}
.pricing-free-card__cta .button--outline {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all 150ms ease;
}
.pricing-free-card__cta .button--outline:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .pricing-includes-strip__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .pricing-includes-strip {
    margin: var(--space-6) var(--space-3) var(--space-4);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
  }
  .pricing-includes-strip__header {
    margin-bottom: var(--space-4);
  }
  .pricing-includes-strip__title {
    font-size: 20px;
  }
  .pricing-includes-strip__list {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .pricing-free-card {
    margin: var(--space-4) var(--space-3) var(--space-8);
    padding: var(--space-6) var(--space-4);
  }
  .pricing-free-card__header {
    padding-top: 0;
  }
  .pricing-free-card__title {
    font-size: var(--font-size-lg);
  }
}

/* =====================================================================
   MOBILE PAYWALL — native iOS app-grade redesign (visible <992px only)
   Mirrors Pencil Mobile 04 Paywall (e7xYmW).
   Replaces hero + trust strip + billing toggle + mobile-pricing-stack +
   final CTA + sticky-CTA + includes-strip + free-card + FAQ on mobile.
   ===================================================================== */

/* By default (desktop), the new mobile paywall is hidden.
   Desktop continues to use the existing hero + comparison-table layout. */
.cp-paywall-mobile,
.cp-paywall-cta-bar {
  display: none;
}

@media (max-width: 991px) {
  /* --- 1. HIDE old mobile chrome. We replace it with the new paywall. --- */
  .pricing-page .page-header--pricing-hero,
  .pricing-page .pricing-trust-strip,
  .pricing-page .billing-toggle,
  .pricing-page .mobile-pricing-stack,
  .pricing-page .pricing-free-note,
  .pricing-page .pricing-includes-strip,
  .pricing-page .pricing-free-card,
  .pricing-page .pricing-final-cta,
  .pricing-page #mobile-sticky-cta {
    display: none !important;
  }

  /* Member-main owns the only horizontal padding; collapse other layers. */
  .pricing-page .member-main {
    padding: 0 !important;
    background: var(--color-slate-50);
  }
  .pricing-page .page-container,
  .pricing-page #pricing-container,
  .pricing-page .page-content {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent;
  }
  .pricing-page .feature-comparison-wrapper,
  .pricing-page .feature-table-responsive-wrapper,
  .pricing-page .trust-stack,
  .pricing-page .pricing-currency-note {
    display: none !important; /* desktop comparison table is folded inside the new "Compare all features" sheet later */
  }

  /* Allow the FAQ to be shown as a compact section below the new paywall.
     Base .pricing-faq sets width:100%; combined with side margins that
     overflowed the viewport by 16px. Use box-sizing padding instead so the
     FAQ aligns to the same 16px page edge as the paywall cards. */
  .pricing-page .pricing-faq {
    width: auto;
    box-sizing: border-box;
    margin: 24px 0 12px;
    padding: 0 16px;
  }
  .pricing-page .pricing-faq .accordion,
  .pricing-page .pricing-faq .accordion__item {
    max-width: 100%;
    box-sizing: border-box;
  }
  .pricing-page .pricing-faq__title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-align: left;
    margin: 0 0 4px;
    color: var(--color-slate-900);
  }
  .pricing-page .pricing-faq__subtitle {
    font-size: 13.5px;
    color: var(--color-gray-500);
    text-align: left;
    margin: 0 0 16px;
    line-height: 1.45;
  }

  /* --- FAQ redesigned as a native iOS grouped list ---
     One rounded container, hairline-divided rows, inline-expanding answers.
     Matches the premium paywall surface; preserves the shared component's
     grid-template-rows open animation. Scoped to .pricing-page only. */
  .pricing-page .pricing-faq .accordion {
    display: block;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .pricing-page .pricing-faq .accordion__item {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    transition: background-color 160ms ease;
  }
  .pricing-page .pricing-faq .accordion__item:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-100);
  }
  .pricing-page .pricing-faq .accordion__item[open] {
    background: #fafaff;
  }
  .pricing-page .pricing-faq .accordion__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px;
    min-height: 56px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-slate-900);
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease;
  }
  .pricing-page .pricing-faq .accordion__item > summary::-webkit-details-marker {
    display: none;
  }
  .pricing-page .pricing-faq .accordion__item[open] > summary {
    color: var(--color-primary);
  }
  .pricing-page .pricing-faq .accordion__item > summary:active {
    background: var(--color-gray-50);
  }
  .pricing-page .pricing-faq .accordion__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 200ms ease, color 200ms ease;
  }
  .pricing-page .pricing-faq .accordion__item[open] .accordion__icon {
    transform: rotate(180deg);
    background: #eef2ff;
    color: var(--color-primary);
  }
  .pricing-page .pricing-faq .accordion__body-inner {
    padding: 0 18px 18px;
  }
  .pricing-page .pricing-faq .accordion__body-inner p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-gray-600);
  }
  .pricing-page .pricing-faq .accordion__body-inner a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
  }
  .pricing-page .pricing-faq .accordion__body-inner a:hover {
    text-decoration: underline;
  }

  /* Body needs bottom-room for both fixed bars: paywall CTA (~72px) + mobile-bottom-nav (~64+safe-area). */
  /* Bottom clearance must exceed the TOTAL fixed chrome so the last FAQ
     accordion can scroll fully clear of it:
       mobile-bottom-nav  ~64px
       paywall CTA bar    ~99px (button 52 + microcopy + 24 padding)
       sits at bottom: 64px → CTA top is ~163px from viewport bottom
     Give a generous buffer so an expanded FAQ item is never trapped. */
  body.pricing-page {
    padding-bottom: calc(210px + env(safe-area-inset-bottom) + 24px) !important;
  }
  /* Native scroll-into-view for opened FAQ items leaves room for the CTA bar.
     JS also nudges an opened item fully clear of the fixed bar (see pricing.js). */
  .pricing-page .pricing-faq .accordion__item {
    scroll-margin-bottom: 220px;
  }

  /* --- 2. SHOW the new paywall ---
     body.pricing-page padding-top is force-zeroed on mobile (rule near top of
     this file), so the paywall itself must clear the fixed member-header. */
  .cp-paywall-mobile {
    display: block;
    padding: calc(var(--header-height, 56px) + 18px) 16px 12px;
    background: var(--color-slate-50);
  }

  /* Lang-switcher floats bottom-right; lift it above the fixed paywall CTA bar
     so the globe never overlaps the Continue button. */
  body.pricing-page .lang-switcher {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 96px) !important;
  }
}

/* --- 3. Paywall head (eyebrow + title + subtitle) --- */
@media (max-width: 991px) {
  .cp-paywall-mobile__head {
    margin: 4px 0 24px;
    animation: cpPaywallFadeUp 420ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
  }
  .cp-paywall-mobile__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-premium-gold-soft, #FEF3C7);
    color: #92400E;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .cp-paywall-mobile__eyebrow i {
    color: #B45309;
    font-size: 9px;
  }
  .cp-paywall-mobile__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--color-slate-900);
    margin: 0 0 10px;
  }
  .cp-paywall-mobile__subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-gray-500);
    margin: 0;
    max-width: 27em;
  }
}

/* --- 3b. Velvet-rope reassurance strip (gold crown) --- */
@media (max-width: 991px) {
  .cp-premium-unlock {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    margin: 0 0 22px;
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(180, 130, 9, 0.06);
    animation: cpPaywallFadeUp 420ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both;
  }
  .cp-premium-unlock__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 1px 2px rgba(180, 130, 9, 0.18);
  }
  /* .cp-crown is forced gold (#F5B400 !important) by premium-crown.css. */
  .cp-premium-unlock__text {
    font-size: 12.5px;
    line-height: 1.45;
    color: #78350F;
  }
  .cp-premium-unlock__text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: #92400E;
    letter-spacing: -0.01em;
    margin-bottom: 1px;
  }
}

/* --- 4. Billing pill bar (Monthly | Yearly) --- */
@media (max-width: 991px) {
  .cp-billing-pillbar {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: #eef2ff;
    border-radius: 999px;
    margin: 0 0 16px;
    animation: cpPaywallFadeUp 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
  }
  .cp-billing-pillbar__btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    color: #4338CA;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.005em;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, transform 80ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
  }
  .cp-billing-pillbar__btn:active {
    transform: scale(0.985);
  }
  .cp-billing-pillbar__btn--active {
    background: #ffffff;
    color: var(--color-slate-900);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                0 2px 5px rgba(15, 23, 42, 0.12);
  }
  .cp-billing-pillbar__save {
    display: inline-block;
    background: #DCFCE7;
    color: #166534;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  .cp-billing-pillbar__btn--active .cp-billing-pillbar__save {
    background: #DCFCE7;
    color: #166534;
  }
}

/* --- 5. Tier cards — spacious separate cards (Apple One / Notion style) --- */
@media (max-width: 991px) {
  .cp-tier-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px;
  }

  .cp-tier-card {
    position: relative;
    display: block;
    width: 100%;
    background: #ffffff;
    border: 1.5px solid var(--color-gray-200);
    border-radius: 18px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease,
                box-shadow 180ms ease, transform 90ms ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    -webkit-tap-highlight-color: transparent;
    animation: cpPaywallFadeUp 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .cp-tier-list .cp-tier-card:nth-child(1) { animation-delay: 110ms; }
  .cp-tier-list .cp-tier-card:nth-child(2) { animation-delay: 160ms; }
  .cp-tier-list .cp-tier-card:nth-child(3) { animation-delay: 210ms; }

  .cp-tier-card:active {
    transform: scale(0.99);
  }
  .cp-tier-card:hover {
    border-color: var(--color-gray-300);
  }

  /* Selected = bold indigo border + soft tint + indigo price. No radio, no badge. */
  .cp-tier-card--selected,
  .cp-tier-card--selected:hover {
    border-color: var(--color-primary);
    background: #f5f5ff;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.12),
                0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .cp-tier-card--selected .cp-tier-card__price-amount {
    color: var(--color-primary);
  }
  .cp-tier-card--current,
  .cp-tier-card--current:hover {
    border-color: #86EFAC;
    background: #f0fdf4;
    cursor: default;
  }

  .cp-tier-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .cp-tier-card__name {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-slate-900);
    letter-spacing: -0.015em;
    line-height: 1.25;
    min-width: 0;
  }

  /* Inline "Recommended" label — text, not a filled pill (iCloud+ pattern). */
  .cp-tier-card__tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
  }
  .cp-tier-card__tag--rec {
    color: var(--color-primary);
  }
  .cp-tier-card__tag--current {
    color: #15803D;
  }

  .cp-tier-card__price {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    line-height: 1;
  }
  .cp-tier-card__price-amount {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-slate-900);
    letter-spacing: -0.02em;
    transition: color 180ms ease;
  }
  /* Original-price strikethrough rendered alongside .cp-tier-card__price-amount
     when the user is mid-lifetime-discount window. Slate-400 + 14px keeps it
     visibly subordinate so the bright discounted figure remains the anchor. */
  .cp-tier-card__price-original {
    display: inline;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: -0.01em;
    text-decoration: line-through;
    margin-right: 4px;
  }
  .cp-tier-card__price-period {
    display: block;
    font-size: 11px;
    color: var(--color-gray-500);
    font-weight: 600;
    margin-top: 3px;
  }

  .cp-tier-card__spec {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-gray-500);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "Billed X once a year" — only visible when Yearly is selected.
     Honesty signal so users know it is a single annual charge. */
  .cp-tier-card__billed {
    display: none; /* JS sets inline 'flex' when Yearly is selected */
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.35;
  }
  .cp-tier-card__billed i {
    font-size: 11px;
    color: var(--color-primary);
    opacity: 0.8;
  }
  /* Strikethrough span inside the "Billed X once a year" line when an
     active lifetime discount applies to the yearly figure. Lets the
     discounted total stand out without losing the original anchor. */
  .cp-tier-card__billed-strike {
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 600;
    margin-right: 4px;
  }
}

/* --- 6. Compare-features button — prominent, obviously tappable row --- */
@media (max-width: 991px) {
  .cp-compare-link {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    color: var(--color-slate-900);
    font-family: inherit;
    padding: 14px 16px;
    margin: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease,
                background-color 160ms ease, transform 80ms ease;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    animation: cpPaywallFadeUp 420ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
  }
  .cp-compare-link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.10);
  }
  .cp-compare-link:active {
    transform: scale(0.99);
    background: #fafaff;
  }
  .cp-compare-link__lead {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
  }
  .cp-compare-link__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #eef2ff;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }
  .cp-compare-link__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cp-compare-link__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-slate-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .cp-compare-link__sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-500);
    line-height: 1.3;
  }
  .cp-compare-link__chev {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--color-gray-400);
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                color 160ms ease;
  }
  .cp-compare-link:hover .cp-compare-link__chev {
    color: var(--color-primary);
    transform: translateX(3px);
  }
}

/* --- 7. Free-plan note — single quiet line --- */
@media (max-width: 991px) {
  .cp-paywall-mobile__free-note {
    text-align: center;
    color: var(--color-gray-400);
    font-size: 12.5px;
    margin: 0;
    line-height: 1.5;
    animation: cpPaywallFadeUp 420ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both;
  }
  .cp-paywall-mobile__free-note strong {
    color: var(--color-gray-600);
    font-weight: 700;
  }
}

/* --- 8. Feature-comparison bottom sheet (native iOS slide-up) --- */
.cp-compare-sheet-backdrop,
.cp-compare-sheet {
  display: none;
}
@media (max-width: 991px) {
  .cp-compare-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1400;
    opacity: 0;
    transition: opacity 280ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cp-compare-sheet-backdrop[hidden] {
    display: none;
  }
  .cp-compare-sheet-backdrop.is-open {
    opacity: 1;
  }

  .cp-compare-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1410;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cp-compare-sheet[hidden] {
    display: none;
  }
  .cp-compare-sheet.is-open {
    transform: translateY(0);
  }

  .cp-compare-sheet__grip {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-gray-300);
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  .cp-compare-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 14px;
    border-bottom: 1px solid var(--color-gray-100);
    flex-shrink: 0;
  }
  .cp-compare-sheet__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
    margin: 0;
  }
  .cp-compare-sheet__close {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 150ms ease, transform 80ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cp-compare-sheet__close:hover {
    background: var(--color-gray-200);
  }
  .cp-compare-sheet__close:active {
    transform: scale(0.92);
  }

  .cp-compare-sheet__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 20px;
    overscroll-behavior: contain;
  }

  /* Comparison grid: feature label + 3 tier value columns */
  .cp-compare-grid {
    display: block;
  }
  .cp-compare-grid__head,
  .cp-compare-grid__row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    align-items: center;
    gap: 6px;
  }
  .cp-compare-grid__head {
    position: sticky;
    top: 0;
    background: #ffffff;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--color-gray-200);
    z-index: 1;
  }
  .cp-compare-grid__row {
    padding: 13px 0;
    border-bottom: 1px solid var(--color-gray-100);
  }
  .cp-compare-grid__row:last-child {
    border-bottom: none;
  }
  .cp-compare-grid__cell {
    font-size: 12.5px;
    line-height: 1.3;
    text-align: center;
    color: var(--color-slate-800);
    min-width: 0;
    word-break: break-word;
  }
  .cp-compare-grid__cell--feat {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--color-slate-900);
  }
  .cp-compare-grid__feat-icon {
    color: var(--color-gray-400);
    font-size: 11px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
  }
  .cp-compare-grid__head .cp-compare-grid__cell--plan {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-slate-900);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .cp-compare-grid__cell.is-rec {
    color: var(--color-primary);
  }
  .cp-compare-grid__head .cp-compare-grid__cell--plan.is-rec {
    color: var(--color-primary);
  }
  .cp-compare-grid__cell--val {
    font-weight: 600;
  }
  .cp-compare-grid__cell--val.is-rec {
    background: #f5f5ff;
    border-radius: 8px;
    padding: 6px 2px;
    color: var(--color-primary);
    font-weight: 700;
  }
  .cp-compare-grid__yes {
    color: #16A34A;
    font-size: 13px;
  }
  .cp-compare-grid__no {
    color: var(--color-gray-300);
    font-size: 11px;
  }
  .cp-compare-sheet__note {
    margin: 16px 0 0;
    font-size: 11.5px;
    color: var(--color-gray-400);
    text-align: center;
    line-height: 1.4;
  }

  body.cp-compare-open {
    overflow: hidden;
  }
  /* The floating language switcher would punch through the sheet (its
     z-index is far higher). Hide it while the comparison sheet is open. */
  body.cp-compare-open .lang-switcher {
    display: none !important;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .cp-compare-sheet {
    transition: transform 120ms ease;
  }
  .cp-compare-sheet-backdrop {
    transition: opacity 120ms ease;
  }
}

/* --- 9. Bottom-anchored CTA bar — the page's only filled CTA --- */
@media (max-width: 991px) {
  .cp-paywall-cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    /* Sit ABOVE the mobile-bottom-nav (64px + safe-area-inset-bottom). */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    background: #ffffff;
    border-top: 1px solid var(--color-gray-100);
    padding: 12px 16px 12px;
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.08);
    animation: cpPaywallCtaSlideIn 480ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
  }
  /* Single full-width button (mirrors Pencil "Continue with Pro"). */
  .cp-paywall-cta-bar__btn,
  .cp-paywall-cta-bar__btn:link,
  .cp-paywall-cta-bar__btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: 52px;
    padding: 0 20px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.005em;
    border-radius: 14px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, transform 80ms ease, box-shadow 180ms ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
                0 2px 6px rgba(15, 23, 42, 0.18);
    -webkit-tap-highlight-color: transparent;
  }
  .cp-paywall-cta-bar__btn:hover,
  .cp-paywall-cta-bar__btn:focus,
  .cp-paywall-cta-bar__btn:focus-visible,
  .cp-paywall-cta-bar__btn:active {
    color: #ffffff !important; /* defeat the global a:hover -> primary-dark color repaint */
    text-decoration: none;
  }
  .cp-paywall-cta-bar__btn:hover {
    background: var(--color-primary-dark);
  }
  .cp-paywall-cta-bar__btn:active {
    transform: scale(0.99);
  }
  .cp-paywall-cta-bar__btn-text {
    display: inline-block;
  }
  .cp-paywall-cta-bar__btn-text strong {
    font-weight: 800;
  }
  .cp-paywall-cta-bar__btn-price {
    display: inline-block;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    font-size: 13.5px;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    padding-left: 10px;
  }
  /* Strikethrough span shown inside the sticky CTA bar's price when the
     user is mid-lifetime-discount. Lighter weight + lower opacity so it
     reads as the "before" anchor while the discounted amount carries the
     bright primary weight. */
  .cp-paywall-cta-bar__btn-price-strike {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
    font-weight: 600;
    margin-right: 4px;
  }
  /* When the discount-absorption claim chip is present, the CTA grows in
     height (two-line stack layout) + adopts a brighter indigo shadow so it
     visually owns the offer. The layout switches from one row → three flex
     cells: [chip] [stack of plan+price] [arrow]. */
  .cp-paywall-cta-bar__btn--with-claim {
    height: auto;
    min-height: 62px;
    padding: 10px 16px;
    gap: 12px;
    justify-content: flex-start;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
                0 10px 26px -8px rgba(67, 56, 202, 0.6),
                0 2px 6px rgba(15, 23, 42, 0.18);
  }
  /* Two-line stack inside the CTA: plan name on top, price below. Keeps
     hierarchy clear — the action ("Continue with Growth") leads, the
     promise ("$9.50/month") supports. */
  .cp-paywall-cta-bar__btn-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
  }
  .cp-paywall-cta-bar__btn--with-claim .cp-paywall-cta-bar__btn-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
  }
  .cp-paywall-cta-bar__btn--with-claim .cp-paywall-cta-bar__btn-price {
    border-left: none;
    padding-left: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
  }
  /* "{pct}% OFF" chip nested INSIDE the CTA — visually pulls the discount
     onto the action surface so the eye doesn't ping-pong between the offer
     strip and the button. Soft white pill with amber text + amber border
     (instead of fully-amber fill) so the contrast against indigo is crisp
     but not garish. Same chrome for both 25% and 50% arms; only the number
     changes. */
  .cp-paywall-cta-bar__btn-claim {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #ffffff;
    color: #B45309;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid #FBBF24;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
                0 2px 4px -2px rgba(120, 53, 15, 0.25);
    white-space: nowrap;
    line-height: 1;
  }
  .cp-paywall-cta-bar__btn-claim i {
    font-size: 10px;
    color: #F59E0B;
  }
  .cp-paywall-cta-bar__btn-arrow {
    font-size: 12px;
    color: inherit;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cp-paywall-cta-bar__btn:hover .cp-paywall-cta-bar__btn-arrow {
    transform: translateX(3px);
  }
  .cp-paywall-cta-bar__btn i {
    color: inherit;
  }
  .cp-paywall-cta-bar__microcopy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--color-gray-500);
    line-height: 1.3;
  }
  .cp-paywall-cta-bar__microcopy i {
    color: #16A34A;
    font-size: 11px;
  }
}

/* Narrow screens (~360px) — drop the price chip to keep the button clean. */
@media (max-width: 360px) {
  .cp-paywall-cta-bar__btn-price {
    display: none;
  }
}

/* --- 10. Entrance animations --- */
@keyframes cpPaywallFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cpPaywallCtaSlideIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion: replace spatial movement with simple opacity. */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .cp-paywall-mobile__head,
  .cp-premium-unlock,
  .cp-billing-pillbar,
  .cp-tier-list,
  .cp-tier-card,
  .cp-compare-link,
  .cp-paywall-mobile__free-note,
  .cp-paywall-cta-bar {
    animation: cpPaywallFadeUp 200ms ease both;
    transform: none !important;
  }
  .cp-tier-card,
  .cp-compare-link i {
    transition-duration: 60ms !important;
  }
}

/* =========================================================================
   /pricing OFFER STRIP — desktop placement + mobile dedupe
   =========================================================================
   The same _ncm-discount-banner.twig partial renders inside cp-paywall-mobile
   (visible <992px) AND in the desktop page-content (>=992px). Without an
   explicit gate, BOTH instances render on mobile — confirmed defect:
   banner #0 inside cp-paywall-mobile shows at top of mobile fold AND a
   second copy appears past the FAQ. We hide the desktop wrapper on mobile
   so only one strip ever paints per viewport.
   ========================================================================= */

/* Desktop wrapper: keep the strip centered to the page-content column so it
   doesn't bleed past the comparison table edges. */
.cp-pricing-discount-banner-wrap {
  margin: 0 auto;
}

/* Mobile (<992px) — hide the desktop wrapper; cp-paywall-mobile owns
   the only visible instance. */
@media (max-width: 991px) {
  .cp-pricing-discount-banner-wrap {
    display: none !important;
  }
}

/* Desktop tightening — when the strip sits between the trust-strip and the
   billing toggle, knock down the surrounding vertical rhythm so the tier
   table rises into the first viewport on 1440×900 laptops. */
@media (min-width: 992px) {
  .cp-pricing-discount-banner-wrap {
    margin-top: 4px;
    margin-bottom: 10px;
  }
  .cp-pricing-discount-banner-wrap .cp-offer-strip {
    margin: 0;
  }
}