/*
=====================================================
  /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;
  /* Monthly/Yearly sits on the money path. The mobile override below trims the
     padding to 8px, which left it at 37px tall, so the floor is pinned here
     where it holds at every width. */
  min-height: 44px;
  justify-content: center;
}

.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: 12px;
  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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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;
  }
}
/* Touch target: the monthly and yearly toggle was 37px tall on phones. */
@media (max-width: 767px) {
  .billing-toggle__btn {
    min-height: 44px;
  }
}