/**
 * Pricing Table - Professional Redesign (Light Mode First)
 *
 * Note: Selectors support both `.pt-*` and legacy `.bf-*` classnames so existing
 * `/black-friday` pages keep working while new pages migrate to the neutral `pt-*` naming.
 *
 * Design Philosophy:
 * - Clean light mode by DEFAULT (matches B2B checkout reference)
 * - Dark mode as ENHANCEMENT (auto-applies via prefers-color-scheme)
 * - Minimal content, generous whitespace
 * - Professional B2B aesthetic
 *
 * ShapeScale Brand DNA:
 * - Uniform font family
 * - Tabler Icons (SVG, no emojis)
 * - 50px border-radius CTAs (signature)
 * - 8px spacing grid
 * - Subtle color palette
 *
 * Path Mapping:
 * LOCAL: ~/GDrive/Projects/cursor/checkout/website/webflow/css/black-friday-redesign.css
 * REMOTE: /public_html/css/black-friday-redesign.css
 * URL: shapescale.com/css/black-friday-redesign.css
 */

/* Longhand properties are a Webflow compatibility mandate (the design-system hook
   blocks shorthand in Webflow files), which conflicts with stylelint-config-standard's
   redundant-longhand rule; the mandate wins for this file. */
/* stylelint-disable declaration-block-no-redundant-longhand-properties --
   Webflow only accepts longhand properties. */

/* Legacy `.ss_bf_*` / `.ss_pt_*` classes are Webflow-markup names that this stylesheet
   must keep matching, so the kebab-case class pattern does not apply here. */
/* stylelint-disable selector-class-pattern --
   Webflow-markup class names. */

/* ========================================
   IMPORTS - Reuse Existing Enhancement Styles
   ======================================== */
@import url('desktop-product-display-enhancements.css');
@import url('mobile-sticky-header-enhancements.css');

/* ========================================
   CSS VARIABLES & THEME CONFIGURATION
   ======================================== */



/* ========================================
   Global Page Styling - Light Mode Base
   ======================================== */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-primary);
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

:is(.pt-page, .bf-page) :focus-visible {
  outline: 2px solid rgb(92 129 255 / 55%);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--pt-white);
  transition: outline-color 100ms ease, box-shadow 100ms ease;
}

/* Page Container - Max Width & Centering */
:is(.pt-page, .bf-page) {
  max-width: 1120px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-right: 1.5rem;
  padding-bottom: 4.5rem;
  padding-left: 1.5rem;
  overflow-x: hidden;
}

:is(.pt-reveal-child, .bf-reveal-child) {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease;
}

:is(.pt-reveal-child, .bf-reveal-child).is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

:is(.pt-cta-microcopy, .bf-cta-microcopy):is(.pt-reveal-child, .bf-reveal-child).is-visible {
  display: none;
}

/* ========================================
   Tabler Icons - Professional SVG Icons
   ======================================== */

/* Base Icon Styling */
.ti {
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 0.5em;
  display: inline-block;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s ease;
}

/* Icon Color Palette (ShapeScale Brand) */
.ti-star-filled,
.ti-trophy {
  color: var(--pt-gold); /* Gold for awards/achievements */
}

.ti-flame {
  color: var(--pt-fire); /* Fire orange for urgency/hot deals */
}

.ti-circle-check,
.ti-check,
.ti-cash,
.ti-coin {
  color: var(--pt-success); /* Green for success/money/included features */
}

.ti-bulb,
.ti-lightbulb {
  color: var(--pt-amber); /* Orange for tips/insights */
}

.ti-clock,
.ti-eye,
.ti-refresh,
.ti-recycle,
.ti-credit-card {
  color: var(--text-secondary); /* Neutral gray for informational icons */
}

/* Accessibility: Reduce icon size for better text alignment */
@media (width <= 768px) {
  .ti {
    font-size: 1em;
    margin-right: 0.4em;
  }
}

/* ========================================
   Icon Animations (Phase 4)
   ======================================== */

/* Scale checkmarks on card hover */
:is(.pt-plan-card, .bf-plan-card):hover .ti-circle-check,
:is(.pt-plan-card, .bf-plan-card):hover .ti-check,
:is(.pt-product-card, .bf-product-card):hover .ti-circle-check,
:is(.pt-product-card, .bf-product-card):hover .ti-check {
  transform: scale(1.1);
  color: var(--accent);
}

/* Arrow slide effect on button hover */
:is(.pt-cta-button, .bf-cta-button) .ti-arrow-right,
.ss_bf_cta_button .ti-arrow-right,
:is(.ss_pt_cta_button, .ss_bf_cta_button) .ti-arrow-right {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Webfont Icons - CSS-Based Replacements
   ======================================== */

/* Trophy icon for "MOST POPULAR" badge */
:is(.pt-badge-popular, .bf-badge-popular)::before,
[class*="most-popular"]::before,
[class*="MOST POPULAR"]::before {
  content: '\ea78'; /* ti-trophy unicode */
  font-family: tabler-icons, sans-serif;
  font-size: 1em;
  margin-right: 0.4em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  color: var(--pt-gold); /* Gold */
}

/* Star icon for "BEST VALUE" badge */
:is(.pt-badge-best-value, .bf-badge-best-value)::before {
  content: '\fb33'; /* ti-star-filled unicode */
  font-family: tabler-icons, sans-serif;
  font-size: 1em;
  margin-right: 0.4em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  color: var(--pt-gold); /* Gold */
}

/* Eye icon for "X people viewing" indicators */
[class*="viewing"]::before,
[class*="people viewing"]::before {
  content: '\ea52'; /* ti-eye unicode */
  font-family: tabler-icons, sans-serif;
  font-size: 1em;
  margin-right: 0.5em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  color: var(--text-secondary);
}

/* Flame icon for stock indicators "🔥 X units available" */
:is(.pt-stock-indicator, .bf-stock-indicator)::before,
[class*="units available"]::before,
[class*="lease units"]::before {
  content: '\ea7b'; /* ti-flame unicode */
  font-family: tabler-icons, sans-serif;
  font-size: 1em;
  margin-right: 0.5em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  color: var(--pt-fire); /* Fire orange */
}

/* Cash icon for savings/discount "💰 SAVE $X" */
:is(.pt-discount-badge, .bf-discount-badge)::before,
[class*="SAVE"]::before,
[class*="BLACK FRIDAY"]::before {
  content: '\ea55'; /* ti-cash unicode */
  font-family: tabler-icons, sans-serif;
  font-size: 1em;
  margin-right: 0.4em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  color: var(--pt-success); /* Green for money */
}

/* Credit card icon for "💳 No Recurring Charges" */
:is(.pt-payment-badge, .bf-payment-badge)[class*="no recurring"]::before,
:is(.pt-payment-badge, .bf-payment-badge)[class*="NO RECURRING"]::before,
[class*="No Recurring"]::before {
  content: '\ea60'; /* ti-credit-card unicode */
  font-family: tabler-icons, sans-serif;
  font-size: 1em;
  margin-right: 0.4em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  color: var(--text-secondary); /* Gray */
}

/* Dark mode adjustments for webfont icons */
@media (prefers-color-scheme: dark) {
  :is(.pt-badge-popular, .bf-badge-popular)::before,
  :is(.pt-badge-best-value, .bf-badge-best-value)::before {
    color: var(--pt-gold); /* Keep gold in dark mode */
  }

  :is(.pt-stock-indicator, .bf-stock-indicator)::before {
    color: var(--pt-fire); /* Keep fire orange */
  }

  :is(.pt-discount-badge, .bf-discount-badge)::before {
    color: var(--pt-success); /* Keep green */
  }
}

/* Remove bright blue gradient header */
:is(.pt-header, .bf-header),
[class*="pt-header"],
[class*="bf-header"] {
  background: transparent;
  background-image: none;
}

/* Professional header typography */
:is(.pt-header-title, .bf-header-title) {
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.02em; /* Tighter, engineered feel */
  margin-bottom: var(--spacing-2);
  font-family: var(--font-family-primary);
}

:is(.pt-header-subtitle, .bf-header-subtitle) {
  color: var(--text-secondary);
  font-size: 1.25rem;
  font-weight: 400;
  font-family: var(--font-family-primary);
}

/* ========================================
   Countdown Timer - COMPACT INLINE PILL
   ======================================== */

/* Countdown Timer - COMPACT INLINE PILL */
:is(.pt-countdown, .bf-countdown) {
  background: var(--surface-elevated);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 999px; /* Full pill */
  padding-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem; /* Compact vertical padding */
  display: inline-flex; /* Inline, not block */
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem; /* Smaller text */
  font-weight: 500;
  margin-top: 0.5rem;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0; /* Minimal vertical margin */
  font-family: var(--font-family-primary);
}

:is(.pt-countdown-label, .bf-countdown-label) {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

:is(.pt-countdown-values, .bf-countdown-values) {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

:is(.pt-countdown-values, .bf-countdown-values) > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1.9rem; /* Compact columns */
}

:is(.pt-countdown-values, .bf-countdown-values) span {
  font-size: 1rem; /* Numbers */
  font-weight: 600;
  line-height: 1;
}

:is(.pt-countdown-values, .bf-countdown-values) small {
  font-size: 0.65rem; /* Labels */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

:is(.pt-countdown-urgent, .bf-countdown-urgent) [data-seconds],
:is(.pt-countdown-urgent, .bf-countdown-urgent) [data-seconds] + small {
  color: var(--pt-amber-deep);
}

@media (prefers-reduced-motion: no-preference) {
  :is(.pt-countdown-urgent, .bf-countdown-urgent) [data-seconds] {
    animation: pt-seconds-pulse 1.2s ease-in-out infinite;
  }
}

@media (width <= 540px) {
  :is(.pt-countdown, .bf-countdown) {
    padding-top: 0.45rem;
    padding-right: 0.85rem;
    padding-bottom: 0.45rem;
    padding-left: 0.85rem;
  }

  :is(.pt-countdown-values, .bf-countdown-values) {
    gap: 0.35rem;
  }

  :is(.pt-countdown-values, .bf-countdown-values) > div {
    min-width: 1.75rem;
  }
}

/* Legacy countdown styles (kept for backwards compatibility) */
:is(.pt-urgency-text, .bf-urgency-text),
[data-countdown] {
  background: var(--surface-elevated);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 12px;
  padding-top: var(--spacing-2);
  padding-right: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  padding-left: var(--spacing-3);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  display: inline-block;
  margin-top: var(--spacing-3);
  margin-right: auto;
  margin-bottom: var(--spacing-3);
  margin-left: auto;
  font-family: var(--font-family-primary);
}

/* Tabler Icon for countdown (clock) - adaptive color */
:is(.pt-urgency-text, .bf-urgency-text)::before,
[data-countdown]::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'%3E%3C/path%3E%3Cpath d='M12 7v5l3 3'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   Product Images - Contained & Polished
   ======================================== */

:is(.pt-plan-image, .bf-plan-image) {
  width: 100%;
  max-width: 250px;
  height: auto;
  margin-top: -1rem;
  margin-right: auto;
  margin-bottom: var(--spacing-2);
  margin-left: auto; /* intentional slight overlap with plan pill */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Contain scaled images */
}

:is(.pt-plan-image, .bf-plan-image) img {
  width: 100%;
  max-width: 250px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle hover lift - polished 2025 interaction */
:is(.pt-plan-image, .bf-plan-image) img:hover {
  transform: scale(1.03);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :is(.pt-plan-image, .bf-plan-image) img {
    transition: none;
  }

  :is(.pt-plan-image, .bf-plan-image) img:hover {
    transform: none;
  }
}

/* ========================================
   Product Cards - Clean Premium Design
   ======================================== */

:is(.pt-product-card, .bf-product-card),
:is(.pt-plan-card, .bf-plan-card),
:is(.pt-side-card, .bf-side-card),
[class*="product-card"] {
  /* Glassmorphism - Semi-transparent frosted glass effect */
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(20px) saturate(180%); /* Safari */
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255 255 255 / 30%);
  border-radius: 16px;
  padding-top: clamp(48px, 5vw, 64px);
  padding-right: clamp(24px, 3vw, 32px);
  padding-bottom: clamp(48px, 5vw, 64px);
  padding-left: clamp(24px, 3vw, 32px); /* Increased top padding for badges */

  /* Layered shadows: outer depth + inner highlight */
  box-shadow:
    0 10px 22px -14px rgb(0 0 0 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 50%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* Context for absolute badges */
  overflow: visible; /* Allow badges to pop out */
  height: 100%;

  /* Flex Layout for Vertical Rhythm */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;

  /* Entrance Animation */
  opacity: 0;
  animation: fade-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}













:is(.pt-product-card, .bf-product-card):hover,
:is(.pt-plan-card, .bf-plan-card):hover {
  transform: translateY(-4px); /* Lean lift, no scale */
  box-shadow:
    0 10px 22px -14px rgb(15 23 42 / 18%), /* Softer depth */
    0 0 0 1px rgb(92 129 255 / 16%),      /* Contained accent ring */
    inset 0 1px 0 rgb(255 255 255 / 50%); /* Inner highlight */

  border-color: rgb(92 129 255 / 18%);
}

/* Scroll reveal for plan cards */
:is(.pt-plan-card, .bf-plan-card):is(.pt-reveal-card, .bf-reveal-card) {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
}

:is(.pt-plan-card, .bf-plan-card):is(.pt-reveal-card, .bf-reveal-card).is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

:is(.pt-plan-card, .bf-plan-card):is(.pt-reveal-card, .bf-reveal-card)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(92 129 255 / 24%), rgb(114 199 197 / 18%), rgb(92 129 255 / 24%));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

:is(.pt-plan-card, .bf-plan-card):is(.pt-reveal-card, .bf-reveal-card).is-visible::before {
  animation: pt-border-wipe 260ms ease forwards;
}

/* Annual card (hero) - subtle highlight */
:is(.pt-product-card, .bf-product-card).annual,
:is(.pt-plan-featured, .bf-plan-featured),
:is(.pt-product-card, .bf-product-card)[data-product-card="annual_lease"],
:is(.pt-hero-card, .bf-hero-card) {
  border-color: var(--accent-alpha-20);
  background: var(--accent-alpha-10);
  z-index: 2; /* Lift above side cards */
}

/* Desktop Scale Effect for Hero */


/* ========================================
   Professional Badges (Subtle, Not Bright)
   ======================================== */

/* Unified Badge System - ShapeScale Brand Gradient */
:is(.pt-plan-label, .bf-plan-label),
.ss_bf_value_badge,
:is(.ss_pt_value_badge, .ss_bf_value_badge),
:is(.pt-badge-best-value, .bf-badge-best-value),
.ss_bf_popular_badge,
:is(.ss_pt_popular_badge, .ss_bf_popular_badge),
:is(.pt-badge-popular, .bf-badge-popular),
[class*="best-value"],
[class*="popular"] {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,
    var(--shape-dark-blue),
    var(--shapescale-teal)
  );
  color: var(--pt-white);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-radius: 999px;
  padding-top: 0.4rem;
  padding-right: 1rem;
  padding-bottom: 0.4rem;
  padding-left: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-family-primary);
  animation: breathe 3s ease-in-out infinite;
  box-shadow: 0 4px 15px rgb(92 129 255 / 40%);
  display: inline-block;
  white-space: nowrap;
  z-index: 10;
}



/* RENEWED UNITS badge - subtle warning */
:is(.pt-renewed-badge, .bf-renewed-badge),
[class*="renewed"] {
  background: rgb(255 165 0 / 8%);
  color: var(--pt-orange);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255 165 0 / 15%);
  border-radius: var(--radius-badge);
  padding-top: var(--spacing-1);
  padding-right: var(--spacing-2);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-2);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-primary);
  margin-bottom: var(--spacing-1);
}

/* Replace warning emoji with Tabler alert-triangle icon */
:is(.pt-renewed-badge, .bf-renewed-badge)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff8c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'%3E%3C/path%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   Stock Indicators - Professional (No Fire Emoji)
   ======================================== */

:is(.pt-stock-indicator, .bf-stock-indicator) {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-family-primary);
}

/* DEPRECATED: Replaced by webfont flame icon (line 172-184) */

/*
:is(.pt-stock-indicator, .bf-stock-indicator)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6 -6l4 4l8 -8'%3E%3C/path%3E%3Cpath d='M14 7l7 0l0 7'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
*/

/* ========================================
   Payment Badges - Professional Icons
   ======================================== */

:is(.pt-payment-badge, .bf-payment-badge) {
  background: var(--surface-elevated);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: var(--radius-badge);
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font-family-primary);
  margin-bottom: var(--spacing-1);
  display: inline-block;
}

/* Replace recycling emoji with Tabler refresh icon */
:is(.pt-payment-badge, .bf-payment-badge)[class*="recurring"]::before,
:is(.pt-payment-badge, .bf-payment-badge)[class*="RECURRING"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'%3E%3C/path%3E%3Cpath d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Replace checkmark emoji with Tabler check icon */
:is(.pt-payment-badge, .bf-payment-badge)[class*="one-time"]::before,
:is(.pt-payment-badge, .bf-payment-badge)[class*="ONE-TIME"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2372c7c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   Feature Items - Tabler Check Icons
   ⚠️  IMPORTANT: Remove "✓ " prefix from Webflow text!
   CSS adds checkmark icons automatically via ::before
   Text should be: "Body scanning" NOT "✓ Body scanning"
   ======================================== */

/* Feature List Items */
.ss_bf_feature_item,
:is(.ss_pt_feature_item, .ss_bf_feature_item),
:is(.pt-feature-item, .bf-feature-item) {
  position: relative;
  padding-left: 24px;
  margin-bottom: 16px; /* Increased breathing room */
  color: var(--text-secondary);
  font-size: 1rem; /* Increased readability */
  line-height: 1.5;
  text-align: left;
  transition: transform 0.2s ease;
}

/* Adds Tabler check icon automatically */
:is(.pt-feature-item, .bf-feature-item)::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2372c7c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   CTA Buttons - Professional B2B Style (Match Reference Pages)
   Black background, 50px pill radius, uppercase text
   ======================================== */

/* Target ALL button variations */
:is(.pt-cta-button, .bf-cta-button),
.ss_bf_cta_button,
:is(.ss_pt_cta_button, .ss_bf_cta_button),
.ss_bf_cta_button.primary,
:is(.ss_pt_cta_button, .ss_bf_cta_button).primary,
.ss_bf_cta_button.secondary,
:is(.ss_pt_cta_button, .ss_bf_cta_button).secondary,
.w-button[href*="checkout.php"],
a[href*="checkout.php"].w-button,
a.ss_bf_cta_button,
a:is(.ss_pt_cta_button, .ss_bf_cta_button) {
  background: var(--shapescale-dark-100);
  color: var(--pt-white);
  border-radius: 50px;
  padding-top: 12px;
  padding-right: 32px;
  padding-bottom: 12px;
  padding-left: 32px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-family-primary);
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none; /* Removed drop shadow as requested */
  text-decoration: none;
  display: inline-block;
  text-align: center;
  width: auto;
  min-width: 160px;
}

/* Hover State - Enhanced Feedback with Subtle Glow */
:is(.pt-cta-button, .bf-cta-button):hover,
.ss_bf_cta_button:hover,
:is(.ss_pt_cta_button, .ss_bf_cta_button):hover,
.w-button[href*="checkout.php"]:hover,
a.ss_bf_cta_button:hover,
a:is(.ss_pt_cta_button, .ss_bf_cta_button):hover {
  background: var(--pt-dark-elevated); /* Lighter gray for visible hover state */
  border-color: var(--pt-dark-elevated);
  color: var(--pt-white);

  /* Layered shadows: depth + subtle brand glow (conservative +20%) */
  box-shadow:
    0 4px 12px rgb(0 0 0 / 15%),
    0 0 20px var(--accent-alpha-20);
  transform: translateY(-2px);
}

/* Active State - Tactile Press */
:is(.pt-cta-button, .bf-cta-button):active,
.ss_bf_cta_button:active,
:is(.ss_pt_cta_button, .ss_bf_cta_button):active,
.w-button[href*="checkout.php"]:active,
a.ss_bf_cta_button:active,
a:is(.ss_pt_cta_button, .ss_bf_cta_button):active {
  transform: translateY(0) scale(0.98); /* Tactile press effect */
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

/* Primary (Hero Annual button) - Slightly larger */
.ss_bf_cta_button.primary,
:is(.ss_pt_cta_button, .ss_bf_cta_button).primary,
[data-product-card="annual"] .ss_bf_cta_button,
[data-product-card="annual"] :is(.ss_pt_cta_button, .ss_bf_cta_button),
[data-product-card="annual"] :is(.pt-cta-button, .bf-cta-button),
:is(.pt-plan-featured, .bf-plan-featured) .ss_bf_cta_button,
:is(.pt-plan-featured, .bf-plan-featured) :is(.ss_pt_cta_button, .ss_bf_cta_button),
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-cta-button, .bf-cta-button) {
  padding-top: 14px;
  padding-right: 40px;
  padding-bottom: 14px;
  padding-left: 40px;
  font-size: 17px;
  font-weight: 600;
}

/* Primary button hover - Subtle gradient overlay effect */
.ss_bf_cta_button.primary:hover,
:is(.ss_pt_cta_button, .ss_bf_cta_button).primary:hover,
[data-product-card="annual"] .ss_bf_cta_button:hover,
[data-product-card="annual"] :is(.ss_pt_cta_button, .ss_bf_cta_button):hover,
[data-product-card="annual"] :is(.pt-cta-button, .bf-cta-button):hover,
:is(.pt-plan-featured, .bf-plan-featured) .ss_bf_cta_button:hover,
:is(.pt-plan-featured, .bf-plan-featured) :is(.ss_pt_cta_button, .ss_bf_cta_button):hover,
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-cta-button, .bf-cta-button):hover {
  /* Subtle gradient overlay via background layering */
  background: linear-gradient(135deg,
    rgb(92 129 255 / 15%) 0%,
    rgb(114 199 197 / 15%) 100%
  ), var(--pt-dark-elevated);

  /* Enhanced glow for hero CTA */
  box-shadow:
    0 6px 20px rgb(0 0 0 / 20%),
    0 0 30px var(--accent-alpha-30);
}

/* ========================================
   Hard Case Callouts - Elegant Design
   ======================================== */

:is(.pt-hard-case-callout, .bf-hard-case-callout) {
  background: rgb(114 199 197 / 5%);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--shapescale-teal);
  border-radius: var(--radius-badge);
  padding-top: var(--spacing-2);
  padding-right: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  padding-left: var(--spacing-3);
  margin-top: var(--spacing-2);
  margin-right: 0;
  margin-bottom: var(--spacing-2);
  margin-left: 0;
  color: var(--text);
  /* stylelint-disable-next-line number-max-precision --
     0.9375rem is exactly 15px at the 16px root and scales with user font size. */
  font-size: 0.9375rem;
  font-family: var(--font-family-primary);
  line-height: 1.6;
}

:is(.pt-hard-case-callout, .bf-hard-case-callout) strong,
:is(.pt-hard-case-callout, .bf-hard-case-callout) b {
  color: var(--shapescale-teal);
  font-weight: 600;
}

/* Replace gift emoji with Tabler gift icon */
:is(.pt-hard-case-callout, .bf-hard-case-callout)::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2372c7c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z'%3E%3C/path%3E%3Cpath d='M12 8l0 13'%3E%3C/path%3E%3Cpath d='M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7'%3E%3C/path%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   Trust Badges - Subtle Professional Design
   ======================================== */

:is(.pt-trust-badge, .bf-trust-badge) {
  color: var(--shapescale-teal);
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-family-primary);
  margin-bottom: 8px;
}

/* Replace ✓ with Tabler check icon */
:is(.pt-trust-badge, .bf-trust-badge)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2372c7c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   Pricing Display - Professional Typography
   ======================================== */

/* Professional header typography - Live Site Mapping */
:is(.pt-hero-card, .bf-hero-card) h2,
:is(.pt-side-card, .bf-side-card) h3,
:is(.pt-header-title, .bf-header-title),
[class*="product-title"],
h2[class*="product"],
h3[class*="product"] {
  color: var(--text);
  font-size: clamp(1.25rem, 3vw, 1.5rem); /* Smaller & Sexier */
  font-weight: 700;
  margin-bottom: var(--spacing-1);
  font-family: var(--font-family-primary);
  text-transform: uppercase; /* Premium feel */
  letter-spacing: 0.1em; /* Wide tracking */
  line-height: 1.2;
  margin-top: 0;
}

/* Price displays - Premium Light (2025) */
.ss_bf_annual_pricing,
:is(.ss_pt_annual_pricing, .ss_bf_annual_pricing),
:is(.pt-side-card, .bf-side-card) > p:nth-of-type(1),
:is(.pt-plan-header, .bf-plan-header) h3,
:is(.pt-price, .bf-price),
[class*="price"],
[data-price] {
  /* Box metrics beat Webflow's `[class*="price"]` rules, which these files cannot change. */
  font-size: clamp(2.2rem, 3.4vw, 2.75rem);
  font-weight: 300; /* Light weight for elegance */
  color: var(--text);
  margin-top: 0.75rem !important;
  margin-right: 0 !important;
  margin-bottom: 0.35rem;
  margin-left: 0;
  font-family: var(--font-family-primary);
  letter-spacing: -0.035em; /* Tighter for large sizes */
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;

  /* Flex layout for baseline-aligned period suffix */
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
}

/* Price period suffix (/mo, /year) - 2025 standard */
:is(.pt-plan-header, .bf-plan-header) h3 span:not(:is(.pt-price-currency, .bf-price-currency)) {
  font-size: 0.26em; /* Smaller for better hierarchy */
  align-self: flex-end;
  margin-left: 0.15em; /* Breathing room before suffix */
  font-weight: 600; /* Heavier weight for contrast */
  color: var(--text-secondary);
  opacity: 0.7; /* Modern reduced opacity */
  letter-spacing: 0;
}

/* Currency symbol - Optically aligned (2025 standard) */
:is(.pt-price-currency, .bf-price-currency) {
  font-size: 0.65em; /* 65% of price size - !important to override [class*="price"] */
  font-weight: 400; /* Slightly heavier for definition */
  align-self: flex-start; /* Align to top of flex container */
  margin-top: 0.15em; /* Optical vertical alignment */
  margin-right: 0.05em; /* Small gap before number */
}

/* Subtle term text below price */
:is(.pt-plan-term, .bf-plan-term) {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  text-align: center;
  font-weight: 400;
  opacity: 0.8;
}

/* Price subtext (equivalents, savings) - compact pills under price */
:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-note, .bf-plan-note),
:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-save, .bf-plan-save),
:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-eqv, .bf-plan-eqv) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.45rem;
  padding-right: 0.65rem;
  padding-bottom: 0.45rem;
  padding-left: 0.65rem;
  margin-top: 0.15rem;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  border-radius: 999px;
  background: rgb(248 250 252 / 90%);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(148 163 184 / 20%);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  width: fit-content;
}

:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-note, .bf-plan-note) i,
:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-save, .bf-plan-save) i,
:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-eqv, .bf-plan-eqv) i {
  color: var(--shapescale-teal);
  margin-right: 0;
}

/* Optional: Helper classes for "Sexy" formatting if HTML allows */
:is(.pt-price-period, .bf-price-period) {
  font-size: 0.4em;
  align-self: flex-end;
  margin-bottom: 0.12em;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0;
}

:is(.pt-price-strikethrough, .bf-price-strikethrough) {
  font-size: 1.25rem;
  color: var(--text-secondary);
  text-decoration: line-through;
  font-family: var(--font-family-primary);
  display: block;
  margin-bottom: 8px;
}

:is(.pt-discount-badge, .bf-discount-badge) {
  background: rgb(114 199 197 / 10%);
  color: var(--shapescale-teal);
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  border-radius: var(--radius-badge);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-family-primary);
  display: inline-block;
}

/* DEPRECATED: Replaced by webfont cash icon (line 186-198) */

/*
:is(.pt-discount-badge, .bf-discount-badge)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2372c7c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'%3E%3C/path%3E%3Cpath d='M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1'%3E%3C/path%3E%3Cpath d='M12 7v10'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
*/

/* ========================================
   Savings Callout - Professional Design
   ======================================== */

:is(.pt-savings-callout, .bf-savings-callout) {
  background: rgb(255 193 7 / 8%);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--pt-amber-bright);
  border-radius: var(--radius-badge);
  padding-top: var(--spacing-1);
  padding-right: var(--spacing-2);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-2);
  margin-top: var(--spacing-1);
  margin-right: 0;
  margin-bottom: var(--spacing-1);
  margin-left: 0;
  font-size: 0.875rem;
  color: var(--pt-orange-deep);
  font-family: var(--font-family-primary);
}

/* Replace lightbulb emoji with Tabler bulb icon */
:is(.pt-savings-callout, .bf-savings-callout)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f57c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'%3E%3C/path%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'%3E%3C/path%3E%3Cpath d='M9.7 17l4.6 0'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   PROPOSAL 2: HERO-CENTER ARCHITECTURE
   Desktop Grid Layout: 25% | 50% | 25%
   Annual card = HERO (center, double width, rich content)
   Side cards = SUPPORTING (smaller, simplified)
   ======================================== */

/* Desktop: Modern Asymmetric Bento Grid (12-column system) */


/* Savings Callout Box (BELOW Annual Card) */
:is(.pt-savings-box, .bf-savings-box),
:is(.pt-annual-savings-box, .bf-annual-savings-box) {
  background: var(--surface-elevated);
  border-width: 2px;
  border-style: solid;
  border-color: rgb(114 199 197 / 30%);
  border-radius: 12px;
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
  margin-top: 16px;
  text-align: center;
  box-shadow: rgb(114 199 197 / 10%) 0 4px 16px 0;
}

:is(.pt-savings-box, .bf-savings-box) p,
:is(.pt-annual-savings-box, .bf-annual-savings-box) p {
  margin-top: 8px;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;
  /* stylelint-disable-next-line number-max-precision --
     0.9375rem is exactly 15px at the 16px root and scales with user font size. */
  font-size: 0.9375rem;
  color: var(--text);
  font-family: var(--font-family-primary);
  font-weight: 500;
}

:is(.pt-savings-box, .bf-savings-box) strong,
:is(.pt-annual-savings-box, .bf-annual-savings-box) strong {
  color: var(--shapescale-teal);
  font-weight: 600;
}

/* Dark mode adjustment for savings box */
@media (prefers-color-scheme: dark) {
  :is(.pt-savings-box, .bf-savings-box),
  :is(.pt-annual-savings-box, .bf-annual-savings-box) {
    border-color: rgb(114 199 197 / 40%);
    box-shadow: rgb(114 199 197 / 15%) 0 4px 16px 0;
  }
}

/* ========================================
   Responsive Design - Mobile Optimizations
   ======================================== */

@media (width <= 991px) {
  /* Explicit single-column grid for mobile */
  :is(.pt-product-grid, .bf-product-grid),
  [class*="product-grid"],
  [class*="pt-grid"],
  [class*="bf-grid"] {
    display: grid;
    grid-template-columns: 1fr; /* Single column */
    gap: 24px; /* Consistent spacing */
  }

  :is(.pt-header-title, .bf-header-title) {
    font-size: 2rem;
  }

  :is(.pt-product-card, .bf-product-card) {
    padding-top: var(--spacing-3);
    padding-right: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    padding-left: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }

  :is(.pt-cta-button, .bf-cta-button),
  .w-button[href*="checkout.php"] {
    padding-top: var(--spacing-2);
    padding-right: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    padding-left: var(--spacing-4);
    font-size: 1rem;
    width: 100%;
  }

  :is(.pt-price, .bf-price) {
    font-size: 2rem;
  }
}

/* ========================================
   Accessibility - Reduced Motion
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* --- Glassmorphism for Dark Mode --- */
  :is(.pt-product-card, .bf-product-card),
  :is(.pt-plan-card, .bf-plan-card),
  [class*="product-card"] {
    background: rgb(30 30 30 / 80%);
    backdrop-filter: blur(20px) saturate(180%);
    border-color: rgb(255 255 255 / 10%);
    box-shadow:
      0 8px 32px rgb(0 0 0 / 40%),
      inset 0 1px 0 rgb(255 255 255 / 10%);
  }

  :is(.pt-product-card, .bf-product-card):hover,
  :is(.pt-plan-card, .bf-plan-card):hover {
    box-shadow:
      0 0 0 2px rgb(92 129 255 / 40%), /* Brighter border glow for dark mode */
      0 2px 8px rgb(0 0 0 / 10%), /* Tightly contained - 2px down, 8px blur */
      inset 0 1px 0 rgb(255 255 255 / 15%); /* Preserve inner highlight */

    border-color: transparent; /* Let border glow take over */
  }

  /* --- Typography --- */
  :is(.pt-header-title, .bf-header-title),
  :is(.pt-price, .bf-price),
  :is(.pt-feature-item, .bf-feature-item) {
    color: var(--text);
  }

  :is(.pt-header-subtitle, .bf-header-subtitle),
  :is(.pt-stock-indicator, .bf-stock-indicator),
  :is(.pt-price-strikethrough, .bf-price-strikethrough) {
    color: var(--text-secondary);
  }

  /* --- Button Glow Effects (Dark Mode) --- */
  :is(.pt-cta-button, .bf-cta-button):hover,
  .ss_bf_cta_button:hover,
  .w-button[href*="checkout.php"]:hover,
  a.ss_bf_cta_button:hover {
    /* Enhanced glow visibility in dark mode */
    box-shadow:
      0 4px 12px rgb(0 0 0 / 30%),
      0 0 24px var(--accent-alpha-30);
  }

  /* Primary button enhanced glow for dark mode */
  .ss_bf_cta_button.primary:hover,
  [data-product-card="annual"] .ss_bf_cta_button:hover,
  [data-product-card="annual"] :is(.pt-cta-button, .bf-cta-button):hover,
  :is(.pt-plan-featured, .bf-plan-featured) .ss_bf_cta_button:hover,
  :is(.pt-plan-featured, .bf-plan-featured) :is(.pt-cta-button, .bf-cta-button):hover {
    box-shadow:
      0 6px 20px rgb(0 0 0 / 40%),
      0 0 40px var(--accent-alpha-40);
  }

  /* --- Badges (Enhanced Gradients for Dark Mode) --- */

  /* BEST VALUE - ShapeScale brand gradient preserved for dark mode */
  .ss_bf_value_badge,
  :is(.pt-badge-best-value, .bf-badge-best-value),
  :is(.pt-plan-label, .bf-plan-label),
  [class*="best-value"] {
    background: linear-gradient(135deg,
      rgb(92 129 255 / 95%) 0%,
      rgb(114 199 197 / 95%) 100%
    );
    color: var(--pt-white);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    box-shadow: 0 4px 20px rgb(92 129 255 / 50%),
                0 2px 8px rgb(114 199 197 / 30%);
    animation: breatheBlue 3s ease-in-out infinite;
  }

  

  /* MOST POPULAR - Blue-teal gradient preserved with enhanced visibility */
  .ss_bf_popular_badge,
  :is(.pt-badge-popular, .bf-badge-popular) {
    background: linear-gradient(135deg,
      rgb(92 129 255 / 95%) 0%,
      rgb(114 199 197 / 95%) 100%
    );
    color: var(--pt-white);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    box-shadow: 0 4px 20px rgb(92 129 255 / 60%),
                0 2px 8px rgb(114 199 197 / 40%);
    animation: breatheTeal 3s ease-in-out infinite;
  }

  

  :is(.pt-renewed-badge, .bf-renewed-badge),
  [class*="renewed"] {
    background: rgb(255 165 0 / 15%);
    color: var(--pt-orange-soft);
    border-color: rgb(255 165 0 / 30%);
  }

  :is(.pt-payment-badge, .bf-payment-badge) {
    background: var(--surface-elevated);
    border-color: var(--border);
    color: var(--text);
  }

  :is(.pt-discount-badge, .bf-discount-badge) {
    background: rgb(114 199 197 / 15%);
    color: var(--pt-aqua-light);
  }

  /* --- Buttons (High Contrast) --- */
  :is(.pt-cta-button, .bf-cta-button),
  .ss_bf_cta_button,
  .w-button[href*="checkout.php"] {
    background: var(--pt-dark-text);
    color: var(--pt-dark-bg);
    border-color: var(--pt-dark-text);
  }

  :is(.pt-cta-button, .bf-cta-button):hover,
  .ss_bf_cta_button:hover,
  .w-button[href*="checkout.php"]:hover {
    background: var(--pt-white);
    border-color: var(--pt-white);
    color: var(--pt-black);
    box-shadow: 0 4px 12px rgb(255 255 255 / 10%); /* Subtle glow on hover */
    transform: translateY(-2px);
  }

  /* Dark mode icon color adjustments */
  :is(.pt-urgency-text, .bf-urgency-text)::before,
  [data-countdown]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'%3E%3C/path%3E%3Cpath d='M12 7v5l3 3'%3E%3C/path%3E%3C/svg%3E");
  }

  :is(.pt-stock-indicator, .bf-stock-indicator)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6 -6l4 4l8 -8'%3E%3C/path%3E%3Cpath d='M14 7l7 0l0 7'%3E%3C/path%3E%3C/svg%3E");
  }

  :is(.pt-payment-badge, .bf-payment-badge)[class*="recurring"]::before,
  :is(.pt-payment-badge, .bf-payment-badge)[class*="RECURRING"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'%3E%3C/path%3E%3Cpath d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'%3E%3C/path%3E%3C/svg%3E");
  }

  :is(.pt-savings-callout, .bf-savings-callout) {
    color: var(--pt-gold-bright);
  }

  :is(.pt-savings-callout, .bf-savings-callout)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffd54f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'%3E%3C/path%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'%3E%3C/path%3E%3Cpath d='M9.7 17l4.6 0'%3E%3C/path%3E%3C/svg%3E");
  }

  :is(.pt-renewed-badge, .bf-renewed-badge) {
    color: var(--pt-gold-soft);
  }

  :is(.pt-renewed-badge, .bf-renewed-badge)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffb347' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'%3E%3C/path%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
  }
}

/* ========================================
   PREMIUM 2025 DESIGN ENHANCEMENTS
   ======================================== */

/* ========================================
   HERO SECTION - COMPACT 2-COLUMN LAYOUT
   Above-the-fold optimization for laptop viewports
   ======================================== */

:is(.pt-hero, .bf-hero) {
  margin-bottom: 3rem; /* Proper separation from pricing section (48px) */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* Text left (wider), image right (narrower) */
  gap: 2rem;
  align-items: start; /* Top-align to prevent vertical centering */
  max-width: 100%;
}

/* Mobile: revert to single column */
@media (width <= 991px) {
  :is(.pt-hero, .bf-hero) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Mobile Small Screens: Hide hero visual + aggressive spacing compression */
@media (width <= 720px) {
  :is(.pt-hero, .bf-hero) {
    margin-bottom: 1rem; /* Reduced from 2rem */
    gap: 0.75rem; /* Tighter gap */
    padding-top: 0.5rem; /* Reduce top padding */
  }

  :is(.pt-hero-visual, .bf-hero-visual) {
    display: none; /* Hide device card on small screens */
  }

  :is(.pt-hero-content, .bf-hero-content) {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0; /* Remove any extra padding */
  }

  :is(.pt-hero-content, .bf-hero-content) h1 {
    font-size: 1.75rem; /* Smaller on mobile */
    margin-bottom: 0.5rem; /* Tighter spacing */
    line-height: 1.1;
  }

  :is(.pt-hero-content, .bf-hero-content) p {
    font-size: 0.85rem; /* Smaller body text */
    margin-bottom: 0.5rem; /* Tighter spacing */
    line-height: 1.35;
  }

  :is(.pt-hero-meta, .bf-hero-meta) {
    margin-bottom: 0.75rem; /* Reduced from 1rem */
    gap: 1rem; /* Tighter gap */
  }

  :is(.pt-hero-cta, .bf-hero-cta) {
    margin-top: 0.75rem; /* Reduced from 1rem */
  }
}

/* Hero Typography - COMPRESSED for laptop viewports */
:is(.pt-hero, .bf-hero) h1,
:is(.pt-hero-content, .bf-hero-content) h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); /* Reduced from 4.5rem max */
  font-weight: 300;
  letter-spacing: -0.03em; /* Tighter tracking */
  line-height: 1.05; /* Tighter line height */
  margin-bottom: 0.5rem; /* Ultra-tight spacing for compact hero */
}

:is(.pt-subtitle, .bf-subtitle),
:is(.pt-hero-content, .bf-hero-content) p {
  max-width: 32rem; /* Reduced from 36rem */
  line-height: 1.4; /* Tighter from 1.5 */
  font-size: 0.9rem; /* Reduced from 1rem */
  color: var(--text-secondary);
  margin-bottom: 0.5rem; /* Ultra-tight spacing for compact hero */
}

:is(.pt-hero-content, .bf-hero-content) h1 span {
  display: block;
  background: linear-gradient(120deg, var(--shape-dark-blue), var(--shapescale-teal));
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Meta - COMPACT INLINE LAYOUT (Horizontal) */
:is(.pt-hero-meta, .bf-hero-meta) {
  display: flex;
  flex-flow: row wrap; /* Horizontal layout: countdown + bullets side-by-side */
  align-items: center;
  gap: 2rem; /* Breathing room between countdown and bullets */ /* Allow wrap on narrow screens */
  margin-bottom: 0.75rem; /* Tightened for compact above-fold hero */
}

:is(.pt-hero-bullets, .bf-hero-bullets) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-size: 0.85rem;
}

:is(.pt-hero-bullets, .bf-hero-bullets) li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 1;
}

:is(.pt-hero-bullets, .bf-hero-bullets) i {
  font-size: 1em;
  color: var(--shapescale-teal);
}

/* Hero CTA - COMPACT BUTTON GROUP */
:is(.pt-hero-cta, .bf-hero-cta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem; /* Reduced from implicit spacing */
}

:is(.pt-hero-cta, .bf-hero-cta) :is(.pt-btn, .bf-btn),
:is(.pt-hero-cta, .bf-hero-cta) :is(.pt-cta-button, .bf-cta-button),
:is(.pt-hero-cta, .bf-hero-cta) :is(.pt-btn-primary, .bf-btn-primary) {
  font-size: 0.95rem; /* Slightly smaller */
  padding-top: 0.65rem;
  padding-right: 1.5rem;
  padding-bottom: 0.65rem;
  padding-left: 1.5rem; /* Compact padding */
}

/* Ghost button - Minimal text link for secondary actions */
:is(.pt-btn-ghost, .bf-btn-ghost) {
  background: transparent;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  color: var(--text-secondary);
  padding-top: 0.5rem;
  padding-right: 0;
  padding-bottom: 0.5rem;
  padding-left: 0;
  min-width: 0;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  box-shadow: none;
}

:is(.pt-btn-ghost, .bf-btn-ghost):hover {
  color: var(--accent);
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* Text Link - 2025 update: replaces ghost button for cleaner secondary actions */
:is(.pt-text-link, .bf-text-link) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding-top: 0.5rem;
  padding-right: 0;
  padding-bottom: 0.5rem;
  padding-left: 0;
  transition: all 0.2s ease;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent; /* Reserve space for border */
}

:is(.pt-text-link, .bf-text-link):hover {
  color: var(--shape-dark-blue);
  border-bottom-color: var(--shape-dark-blue);
  transform: translateX(2px); /* Subtle movement */
}

/* Dark mode support for text link */
@media (prefers-color-scheme: dark) {
  :is(.pt-text-link, .bf-text-link):hover {
    color: var(--shapescale-teal);
  }
}

/* Pricing Grid - REDUCED TOP SPACING */
:is(.pt-plans, .bf-plans) {
  padding-top: 1rem; /* Reduced from implicit 4rem+ */
  padding-bottom: 2rem; /* Clearance for staggered monthly card (3rem stagger + 3rem buffer) */
  scroll-margin-top: 80px; /* Maintain anchor offset */
}

/* Pricing section subtitle spacing - Desktop */
:is(.pt-plans-subtitle, .bf-plans-subtitle) {
  margin-bottom: 4.5rem; /* Generous spacing before pricing cards on desktop */
  line-height: 1.4;
}

/* Let pricing peek into fold on large screens */


/* Value callout box - all plans */
:is(.pt-value-callout, .bf-value-callout) {
  background: linear-gradient(135deg, var(--accent-alpha-10), rgb(114 199 197 / 10%));
  border-width: 1px;
  border-style: solid;
  border-color: var(--accent-alpha-20);
  border-radius: 12px;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  margin-top: 0.25rem; /* 4px - tight to features above */
  margin-bottom: 2.5rem; /* 40px - generous space before CTA */
  font-size: 0.9rem;
}

:is(.pt-value-callout, .bf-value-callout) p {
  margin-top: 6px;
  margin-right: 0;
  margin-bottom: 6px;
  margin-left: 0; /* Increase from 0.25rem for better spacing */
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Increase from 0.3rem */
  font-weight: 600; /* Add emphasis */
  color: var(--shape-dark-blue); /* Use brand blue */
}

:is(.pt-value-callout, .bf-value-callout) p:first-child {
  font-size: 0.9rem; /* Larger for main savings message */
  font-weight: 700; /* Bolder */
}

:is(.pt-value-callout, .bf-value-callout) i {
  color: var(--shape-dark-blue);
  margin-right: 0;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Annual/Monthly lease value callout - more muted text (secondary to Lifetime) */
[data-product-card="annual_lease"] :is(.pt-value-callout, .bf-value-callout) p,
[data-product-card="annual_lease"] :is(.pt-value-callout, .bf-value-callout) i,
[data-product-card="monthly_lease"] :is(.pt-value-callout, .bf-value-callout) p,
[data-product-card="monthly_lease"] :is(.pt-value-callout, .bf-value-callout) i {
  color: var(--pt-gray-500); /* Muted gray */
  font-weight: 500;
}

/* Premium glassmorphic value callout for featured card - with gradient border glow */
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-value-callout, .bf-value-callout),
:is(.pt-hero-card, .bf-hero-card) :is(.pt-value-callout, .bf-value-callout),
[data-product-card="lifetime_purchase"] :is(.pt-value-callout, .bf-value-callout) {
  /* Gradient border effect using background layers */
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  background:
    linear-gradient(rgb(255 255 255 / 96%), rgb(255 255 255 / 96%)) padding-box,
    linear-gradient(135deg, var(--shape-dark-blue), var(--shapescale-teal)) border-box;
  backdrop-filter: blur(12px);

  /* Structure - 8px grid compliant */
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem; /* 24px */
  margin-top: 0.25rem; /* 4px - tight to features above */
  margin-bottom: 2.5rem; /* 40px - generous space before CTA */
  border-radius: 16px; /* Less than card's 25px for hierarchy */

  /* Premium glow effect */
  box-shadow:
    0 0 24px rgb(92 129 255 / 12%),
    0 4px 12px rgb(92 129 255 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 15%);
  font-size: 0.85rem; /* Increase from 0.8rem for better readability */
}

/* Plan Features List - Remove Default Bullets */
:is(.pt-plan-features, .bf-plan-features) {
  list-style: none;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start; /* Left-align features */
}

:is(.pt-plan-features, .bf-plan-features).two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.5rem;
}

:is(.pt-plan-features, .bf-plan-features).two-col li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

@media (width <= 991px) {
  :is(.pt-plan-features, .bf-plan-features).two-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

:is(.pt-plan-features, .bf-plan-features) li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: left; /* Ensure left-aligned text */
}

:is(.pt-plan-features, .bf-plan-features) li i {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--shapescale-teal);
  font-size: 1em;
  display: block; /* Override inline styles */
}

:is(.pt-plan-features, .bf-plan-features) li > *:not(i) {
  display: inline; /* Ensure all non-icon content stays inline */
}

/* Consolidate badges into inline text with dots */
:is(.pt-badges, .bf-badges) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* Center badges in each column */
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 1rem;
}

:is(.pt-badges, .bf-badges) span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

:is(.pt-badges, .bf-badges) span:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

:is(.pt-badges, .bf-badges) i {
  font-size: 0.9em;
  color: var(--shapescale-teal);
}

/* Enhanced social proof on Featured/Annual card - 2025 update */
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-badges, .bf-badges),
:is(.pt-plan-card, .bf-plan-card)[data-plan="annual"] :is(.pt-badges, .bf-badges) {
  background: rgb(114 199 197 / 6%); /* Subtle teal background */
  border-width: 1px;
  border-style: solid;
  border-color: rgb(114 199 197 / 20%); /* Soft teal border */
  border-radius: 12px; /* Consistent with card radii */
  padding-top: 0.75rem;
  padding-right: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem; /* More prominent padding */
  margin-top: 0.75rem; /* Closer to CTA */
  gap: 0.75rem; /* More breathing room */
  font-size: 0.85rem; /* Slightly larger for readability */
  color: var(--text); /* Darker text for emphasis */
}

:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-badges, .bf-badges) span,
:is(.pt-plan-card, .bf-plan-card)[data-plan="annual"] :is(.pt-badges, .bf-badges) span {
  font-weight: 500; /* Medium weight for prominence */
}

:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-badges, .bf-badges) i,
:is(.pt-plan-card, .bf-plan-card)[data-plan="annual"] :is(.pt-badges, .bf-badges) i {
  color: var(--shapescale-teal); /* Teal icons for trust signals */
  font-size: 1em; /* Slightly larger icons */
}

/* Trust signals grid - Always on top of pricing cards */
:is(.pt-trust-signals, .bf-trust-signals) {
  margin-top: 4rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 3; /* Above pricing cards (which have z-index: 2) */
}

:is(.pt-trust-grid, .bf-trust-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

:is(.pt-trust-item, .bf-trust-item) {
  text-align: center;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
}

:is(.pt-trust-item, .bf-trust-item) i {
  font-size: 2.5rem;
  color: var(--shape-dark-blue);
  margin-bottom: 1rem;
  display: block;
}

:is(.pt-trust-item, .bf-trust-item) h4 {
  margin-top: 0.5rem;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

:is(.pt-trust-item, .bf-trust-item) p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Social proof section */
:is(.pt-social-proof, .bf-social-proof) {
  text-align: center;
  max-width: 800px;
  margin-top: 4rem;
  margin-right: auto;
  margin-bottom: 4rem;
  margin-left: auto;
  padding-top: 3rem;
  padding-right: 2rem;
  padding-bottom: 3rem;
  padding-left: 2rem;
}

:is(.pt-social-proof, .bf-social-proof) h2 {
  margin-bottom: 2rem;
}

/* Logo Marquee */
:is(.pt-logo-marquee, .bf-logo-marquee) {
  overflow: hidden;
  margin-top: 2.5rem;
  margin-right: 0;
  margin-bottom: 2.5rem;
  margin-left: 0;
  padding-top: 2rem;
  padding-right: 0;
  padding-bottom: 2rem;
  padding-left: 0;
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 2%), transparent);
}

:is(.pt-logo-track, .bf-logo-track) {
  display: flex;
  gap: 3rem;
  animation: marquee 30s linear infinite;
}

:is(.pt-logo-track, .bf-logo-track) img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s ease;
  flex-shrink: 0;
}

:is(.pt-logo-track, .bf-logo-track) img:hover {
  filter: grayscale(0%) opacity(1);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

:is(.pt-testimonial, .bf-testimonial) {
  font-size: 1.1rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 2rem;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-left: auto; /* Center with auto margins */
  padding-top: 0;
  padding-right: 2rem;
  padding-bottom: 0;
  padding-left: 2rem;
  max-width: 32rem; /* Constrain line length for readability */
}

:is(.pt-payment-methods, .bf-payment-methods) {
  margin-top: 3rem;
}

:is(.pt-payment-methods, .bf-payment-methods) p {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

:is(.pt-payment-icons, .bf-payment-icons) {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

:is(.pt-payment-icons, .bf-payment-icons) i {
  font-size: 2rem;
  color: var(--text-secondary);
  opacity: 0.7;
  transition: opacity 0.2s;
}

:is(.pt-payment-icons, .bf-payment-icons) i:hover {
  opacity: 1;
}

/* FAQ section */
:is(.pt-faq, .bf-faq) {
  max-width: 800px;
  margin-top: 4rem;
  margin-right: auto;
  margin-bottom: 4rem;
  margin-left: auto;
}

:is(.pt-faq, .bf-faq) h2 {
  text-align: center;
  margin-bottom: 2rem;
}

:is(.pt-faq-item, .bf-faq-item) {
  background: var(--surface);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

:is(.pt-faq-item, .bf-faq-item):hover {
  box-shadow: var(--shadow);
}

:is(.pt-faq-item, .bf-faq-item) summary {
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-right: 0.5rem;
  transition: color 160ms ease;
}

:is(.pt-faq-item, .bf-faq-item) summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--shape-dark-blue);
  transition: transform 0.2s, color 0.2s, opacity 0.2s;
}

:is(.pt-faq-item, .bf-faq-item)[open] summary::after {
  transform: rotate(45deg);
}

:is(.pt-faq-item, .bf-faq-item) p {
  margin-top: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

:is(.pt-faq-item, .bf-faq-item).is-visible {
  border-color: rgb(92 129 255 / 15%);
}

:is(.pt-faq-item, .bf-faq-item).is-visible summary::after {
  opacity: 0.9;
  color: var(--text);
}

/* Final CTA section */
:is(.pt-final-cta, .bf-final-cta) {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2.2rem;
  padding-right: 2rem;
  padding-bottom: 2.2rem;
  padding-left: 2rem; /* Reduced from 3rem for tighter spacing */
  background: linear-gradient(135deg, rgb(92 129 255 / 8%), rgb(114 199 197 / 8%));
  border-radius: 16px;
  opacity: 0;
  transform: scale(0.99);
  filter: blur(6px);
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

:is(.pt-final-cta, .bf-final-cta) h3 {
  margin-bottom: 1rem;
}

:is(.pt-final-cta, .bf-final-cta) p {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

:is(.pt-btn-large, .bf-btn-large) {
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  font-size: 1.1rem;
}

:is(.pt-final-cta, .bf-final-cta).is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  position: relative;
}

:is(.pt-final-cta, .bf-final-cta).is-visible::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(92 129 255 / 20%), rgb(114 199 197 / 18%), rgb(92 129 255 / 20%));
}

/* Loading spinner for buttons */
.ti-spin {
  animation: spin 1s linear infinite;
}



/* Responsive adjustments */
@media (width <= 768px) {
  :is(.pt-trust-grid, .bf-trust-grid) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  :is(.pt-trust-item, .bf-trust-item) {
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
  }

  :is(.pt-trust-item, .bf-trust-item) i {
    font-size: 2rem;
  }

  :is(.pt-testimonial, .bf-testimonial) {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 1rem;
  }

  :is(.pt-payment-icons, .bf-payment-icons) {
    gap: 1rem;
  }

  :is(.pt-payment-icons, .bf-payment-icons) i {
    font-size: 1.5rem;
  }
}

/* ========================================
   DARK MODE ENHANCEMENTS
   ======================================== */

@media (prefers-color-scheme: dark) {
  body {
    background: var(--pt-bg);
  }

  /* Dark mode glassmorphic value callout - with gradient border glow */
  :is(.pt-plan-featured, .bf-plan-featured) :is(.pt-value-callout, .bf-value-callout),
  :is(.pt-hero-card, .bf-hero-card) :is(.pt-value-callout, .bf-value-callout),
  [data-product-card="lifetime_purchase"] :is(.pt-value-callout, .bf-value-callout) {
    background:
      linear-gradient(var(--dark-bg, var(--pt-dark-bg)), var(--dark-bg, var(--pt-dark-bg))) padding-box,
      linear-gradient(135deg, var(--dark-brand-blue, var(--shape-dark-blue)), var(--shapescale-teal)) border-box;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    box-shadow:
      0 0 32px rgb(92 129 255 / 20%),
      0 8px 16px rgb(0 0 0 / 30%),
      inset 0 1px 0 rgb(255 255 255 / 8%);
  }

  :is(.pt-faq-item, .bf-faq-item) {
    background: rgb(255 255 255 / 3%);
    border-color: rgb(255 255 255 / 8%);
  }

  :is(.pt-faq-item, .bf-faq-item):hover {
    background: rgb(255 255 255 / 5%);
  }

  :is(.pt-final-cta, .bf-final-cta) {
    background: linear-gradient(135deg, rgb(92 129 255 / 12%), rgb(114 199 197 / 12%));
  }

  /* Plan toggle (tabs) */
  :is(.pt-plan-toggle, .bf-plan-toggle) {
    background: rgb(255 255 255 / 5%);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 10%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  }

  :is(.pt-plan-tab, .bf-plan-tab) {
    color: rgb(255 255 255 / 70%);
  }

  :is(.pt-plan-tab, .bf-plan-tab) span {
    color: var(--pt-aqua-soft);
  }

  :is(.pt-plan-tab, .bf-plan-tab).is-active {
    background: rgb(255 255 255 / 10%);
    color: var(--pt-white);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 18%);
    box-shadow: 0 10px 28px -16px rgb(0 0 0 / 60%);
  }

  /* Plan cards */
  :is(.pt-plan-card, .bf-plan-card),
  :is(.pt-product-card, .bf-product-card) {
    background: rgb(255 255 255 / 4%);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 14px 38px -14px rgb(0 0 0 / 70%);
  }

  :is(.pt-plan-card, .bf-plan-card) :is(.pt-plan-badge, .bf-plan-badge) {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 18%);
    color: var(--pt-dark-text-soft);
  }

  :is(.pt-plan-header, .bf-plan-header) h3 {
    color: var(--pt-white);
  }

  :is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-note, .bf-plan-note),
  :is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-save, .bf-plan-save),
  :is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-eqv, .bf-plan-eqv) {
    background: rgb(255 255 255 / 8%);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 14%);
    color: var(--pt-dark-text-soft);
  }

  :is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-note, .bf-plan-note) i,
  :is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-save, .bf-plan-save) i,
  :is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-eqv, .bf-plan-eqv) i {
    color: var(--pt-aqua-soft);
  }

  :is(.pt-plan-card, .bf-plan-card) li {
    color: var(--pt-dark-text-soft);
  }
}


/* =========================================
   Premium 2025 Design Enhancements
   (Consolidated from black-friday-2025.html)
   ========================================= */

/* Hero Device Card - CONSTRAINED & COMPACT */
:is(.pt-device-card, .bf-device-card) {
  position: relative;
  border-radius: 16px; /* Unified with card system (12/16/25/50/999px) */
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem; /* Reduced from 1.3rem */
  background: radial-gradient(circle at top left, rgb(18 18 18 / 90%), rgb(18 18 18 / 95%));
  border-width: 1px;
  border-style: solid;
  border-color: rgb(148 163 184 / 35%);
  box-shadow: var(--pt-shadow-soft);
  backdrop-filter: blur(22px);
  box-sizing: border-box; /* Include padding/border in width calculation */

  /* SIZE CONSTRAINTS for laptop screens - explicit width control */
  width: min(100%, 420px); /* Never exceed 420px */
  max-width: 420px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto; /* Center if container is wider */

  /* SIMPLIFIED TRANSFORM - reduce vertical space */
  transform: translateY(0); /* Remove 3D rotation that adds height */
  transition: transform var(--pt-transition-med), box-shadow var(--pt-transition-med);
}

/* Shorter screens get even smaller card */
@media (height <= 800px) {
  :is(.pt-device-card, .bf-device-card) {
    width: min(100%, 360px); /* Never exceed 360px on short screens */
    max-width: 360px;
    padding-top: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
  }
}

:is(.pt-device-card, .bf-device-card):hover {
  transform: translateY(-4px) scale(1.01); /* Simplified hover, less vertical lift */
  box-shadow: 0 20px 50px rgb(0 0 0 / 90%);
  border-color: rgb(92 129 255 / 60%);
}

:is(.pt-device-card, .bf-device-card) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px; /* Reduced from 20px */
  object-fit: cover;
}

:is(.pt-saving-badge, .bf-saving-badge) {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  padding-top: 0.4rem;
  padding-right: 0.9rem;
  padding-bottom: 0.4rem;
  padding-left: 0.9rem;
  border-radius: var(--pt-radius-pill);
  background: linear-gradient(120deg, var(--pt-primary), var(--pt-accent));
  color: var(--pt-ink);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgb(0 0 0 / 80%);
  display: none;
}

/* Faint gradient overlay on hover (inside bounds) */
:is(.pt-plan-card, .bf-plan-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgb(92 129 255 / 8%), rgb(114 199 197 / 6%));
  opacity: 0;
  transition: opacity var(--pt-transition-med);
  pointer-events: none;
}

:is(.pt-plan-card, .bf-plan-card):hover::after {
  opacity: 1;
}

:is(.pt-plan-card, .bf-plan-card) img {
  transition: transform 160ms ease;
  will-change: transform;
}

:is(.pt-settle, .bf-settle) {
  animation: pt-settle 140ms ease-out;
}

/* List item affordance */
:is(.pt-plan-card, .bf-plan-card) li {
  transition: color 120ms ease;
}

:is(.pt-plan-card, .bf-plan-card) li .ti {
  transition: transform 120ms ease, color 120ms ease;
}

:is(.pt-plan-card, .bf-plan-card) li:hover,
:is(.pt-plan-card, .bf-plan-card) li:focus-within {
  color: var(--pt-ink-800);
}

:is(.pt-plan-card, .bf-plan-card) li:hover .ti,
:is(.pt-plan-card, .bf-plan-card) li:focus-within .ti {
  transform: translateY(-1px);
  color: var(--pt-ink-800);
}

/* Dark mode fix for list item hover */
@media (prefers-color-scheme: dark) {
  :is(.pt-plan-card, .bf-plan-card) li:hover,
  :is(.pt-plan-card, .bf-plan-card) li:focus-within {
    color: var(--pt-white);
  }

  :is(.pt-plan-card, .bf-plan-card) li:hover .ti,
  :is(.pt-plan-card, .bf-plan-card) li:focus-within .ti {
    color: var(--pt-white);
  }

  /* Remove global ul background from plan features (Webflow sets it on the list element) */
  :is(.pt-plan-features, .bf-plan-features),
  :is(.pt-badges, .bf-badges) {
    background: transparent !important;
  }
}

/* Plan badges (pill above image) - Light mode base */
:is(.pt-plan-badge, .bf-plan-badge) {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  padding-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 95%);
  backdrop-filter: blur(12px);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(0 0 0 / 10%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* stylelint-disable-next-line number-max-precision --
     0.8125rem is exactly 13px at the 16px root and scales with user font size. */
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pt-ink-700);
  letter-spacing: 0.02em;
  z-index: 5;
  pointer-events: none;
}

:is(.pt-plan-badge, .bf-plan-badge) i {
  display: none; /* Hide icons by default - text-only pills reduce visual noise */
  color: var(--shape-dark-blue);
  margin-right: 0;
}

/* Show icon only on Featured/Annual card (gold icon for premium badge) */
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-plan-badge, .bf-plan-badge) i,
:is(.pt-plan-card, .bf-plan-card)[data-plan="annual"] :is(.pt-plan-badge, .bf-plan-badge) i {
  display: inline; /* Show icon on premium featured card only */
  color: var(--pt-gold); /* Gold color for premium badge */
}

/* Featured/Annual badge - light mode: subtle blue tint with dark text */
:is(.pt-plan-card, .bf-plan-card)[data-plan="annual"] :is(.pt-plan-badge, .bf-plan-badge),
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-plan-badge, .bf-plan-badge) {
  background: rgb(92 129 255 / 12%);
  border-color: rgb(92 129 255 / 30%);
  color: var(--pt-ink-600);
}

/* Faint pulse animation on Annual/Featured badge */
@media (prefers-reduced-motion: no-preference) {
  :is(.pt-plan-featured, .bf-plan-featured) :is(.pt-plan-badge, .bf-plan-badge) {
    animation: pt-badge-pulse 3s ease-in-out infinite;
  }
}



/* Monthly badge - light mode: neutral style */
:is(.pt-plan-card, .bf-plan-card)[data-plan="monthly"] :is(.pt-plan-badge, .bf-plan-badge) {
  background: rgb(100 116 139 / 10%);
  border-color: rgb(100 116 139 / 20%);
  color: var(--pt-slate);
}

/* Lifetime badge - light mode: subtle warm tint with dark text */
:is(.pt-plan-card, .bf-plan-card)[data-plan="lifetime"] :is(.pt-plan-badge, .bf-plan-badge) {
  background: rgb(255 115 70 / 12%);
  border-color: rgb(255 115 70 / 25%);
  color: var(--pt-brown);
}

/* Dark mode badges - glass style with white text */
@media (prefers-color-scheme: dark) {
  :is(.pt-plan-badge, .bf-plan-badge) {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 20%);
    box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
    color: var(--pt-white);
  }

  :is(.pt-plan-badge, .bf-plan-badge) i {
    color: var(--pt-blue-soft);
  }

  /* Monthly badge - dark mode glass */
  :is(.pt-plan-card, .bf-plan-card)[data-plan="monthly"] :is(.pt-plan-badge, .bf-plan-badge) {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 20%);
    color: var(--pt-white);
  }

  /* Annual badge - subtle blue tint */
  :is(.pt-plan-card, .bf-plan-card)[data-plan="annual"] :is(.pt-plan-badge, .bf-plan-badge),
  :is(.pt-plan-featured, .bf-plan-featured) :is(.pt-plan-badge, .bf-plan-badge) {
    background: rgb(92 129 255 / 25%);
    border-color: rgb(92 129 255 / 40%);
    color: var(--pt-white);
  }

  /* Lifetime badge - subtle warm tint */
  :is(.pt-plan-card, .bf-plan-card)[data-plan="lifetime"] :is(.pt-plan-badge, .bf-plan-badge) {
    background: rgb(255 115 70 / 22%);
    border-color: rgb(255 115 70 / 35%);
    color: var(--pt-white);
  }
}

/* Featured badge spacing to avoid overlap with plan pill */
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-plan-label, .bf-plan-label) {
  top: -15px;
}

/* Hide duplicate kicker text inside headers (badge replaces it visually) */
:is(.pt-plan-header, .bf-plan-header) :is(.pt-plan-kicker, .bf-plan-kicker) {
  display: none;
}

/* Lift price block upward for tighter hierarchy (Webflow's h3 margin wins otherwise) */
:is(.pt-plan-header, .bf-plan-header) h3 {
  margin-top: 0.35rem !important;
}

/* Primary Button - 2025 thin-shadow, outlined fill swap */
:is(.pt-btn-primary, .bf-btn-primary) {
  /* Box metrics and display beat Webflow's `.w-button` / `[class*="price"]` defaults. */
  background: var(--shape-dark-blue);
  color: var(--pt-white);
  border-width: 3px;
  border-style: solid;
  border-color: var(--shape-dark-blue);
  border-radius: 999px;
  padding-top: 0.72rem !important;
  padding-right: 1.9rem !important;
  padding-bottom: 0.72rem !important;
  padding-left: 1.9rem !important;
  font-size: 1rem !important;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 14px -12px rgb(0 0 0 / 35%);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  text-decoration: none;
  display: inline-block !important;
  cursor: pointer;
  font-family: var(--font-family-primary);
  position: relative;
}

:is(.pt-btn-primary, .bf-btn-primary):hover {
  background: var(--pt-white);
  color: var(--pt-blue-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -16px rgb(52 96 196 / 35%), inset 0 0 0 1px rgb(92 129 255 / 30%);
}

:is(.pt-btn-primary, .bf-btn-primary):active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 5px 14px -12px rgb(32 64 152 / 40%);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :is(.pt-btn-primary, .bf-btn-primary) {
    background: var(--pt-blue-mid);
    color: var(--pt-white);
    border-color: var(--pt-blue-mid);
    box-shadow: 0 8px 18px -14px rgb(0 0 0 / 45%);
  }

  :is(.pt-btn-primary, .bf-btn-primary):hover {
    background: rgb(255 255 255 / 94%);
    color: var(--pt-blue-bright);
    border-color: var(--pt-blue-light);
    box-shadow: 0 10px 28px -16px rgb(0 0 0 / 50%);
  }
}

/* Primary Outline Button - Blue Border with Transparent Background */
:is(.pt-btn-primary-outline, .bf-btn-primary-outline) {
  background: transparent;
  color: var(--shape-dark-blue);
  border-width: 2px;
  border-style: solid;
  border-color: var(--shape-dark-blue);
  border-radius: 50px;
  padding-top: 0.75rem;
  padding-right: 2rem;
  padding-bottom: 0.75rem;
  padding-left: 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-family-primary);
}

:is(.pt-btn-primary-outline, .bf-btn-primary-outline):hover {
  background: var(--shape-dark-blue);
  color: var(--pt-white);
  border-color: var(--shape-dark-blue);
  box-shadow: 0 8px 18px -14px rgb(52 96 196 / 35%);
  transform: translateY(-1px);
}

:is(.pt-btn-primary-outline, .bf-btn-primary-outline):active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* Dark Mode Support for Outline Button */
@media (prefers-color-scheme: dark) {
  :is(.pt-btn-primary-outline, .bf-btn-primary-outline) {
    color: var(--shape-dark-blue);
    border-color: var(--shape-dark-blue);
  }

  :is(.pt-btn-primary-outline, .bf-btn-primary-outline):hover {
    background: var(--shape-dark-blue);
    color: var(--pt-white);
    box-shadow: 0 4px 8px rgb(92 129 255 / 30%);
  }
}

/* Pulse animation for low stock */
:is(.pt-units, .bf-units).low-stock {
  color: var(--pt-orange-vivid);
  position: relative;
}

:is(.pt-units, .bf-units).low-stock:is(.pt-pulse, .bf-pulse)::after {
  content: "";
  position: absolute;
  inset: -0.1rem;
  border-radius: var(--pt-radius-pill);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(249 115 22 / 60%);
  opacity: 0;
  animation: pt-pulse 1.4s 1 forwards;
}



/* Scroll reveal animation - SCOPED to hero + cards only (2025 update) */
:is(.pt-reveal, .bf-reveal) {
  /* No animation by default - reduces visual noise */
  opacity: 1;
  transform: none;
}

/* Animate ONLY hero section and plan cards */
:is(.pt-hero, .bf-hero):is(.pt-reveal, .bf-reveal),
:is(.pt-plan-card, .bf-plan-card):is(.pt-reveal, .bf-reveal) {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--pt-transition-med),
    transform var(--pt-transition-med);
}

:is(.pt-hero, .bf-hero):is(.pt-reveal, .bf-reveal).is-visible,
:is(.pt-plan-card, .bf-plan-card):is(.pt-reveal, .bf-reveal).is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   REDUCED MOTION SUPPORT (Consolidated)
   Respects user's motion preferences for accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* Global: Disable all animations and transitions */
  :is(.pt-page, .bf-page) *,
  :is(.pt-page, .bf-page) *::before,
  :is(.pt-page, .bf-page) *::after,
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Icons: Remove transitions and transforms */
  .ti {
    transition: none !important;
  }

  :is(.pt-plan-card, .bf-plan-card):is(:hover, :focus-within) .ti,
  :is(.pt-product-card, .bf-product-card):is(:hover, :focus-within) .ti {
    transform: none !important;
  }

  /* Product cards: Preserve box-shadow transition only */
  :is(.pt-product-card, .bf-product-card) {
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  :is(.pt-product-card, .bf-product-card):hover {
    transform: none;
  }

  /* CTA buttons: Preserve background transition only */
  :is(.pt-cta-button, .bf-cta-button),
  .ss_bf_cta_button,
  .w-button[href*="checkout.php"] {
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  :is(.pt-cta-button, .bf-cta-button):hover,
  .ss_bf_cta_button:hover,
  .w-button[href*="checkout.php"]:hover {
    transform: none !important;
  }
}

/* Mobile plan toggle (Economist-style) */
:is(.pt-plan-toggle, .bf-plan-toggle),
:is(.pt-sticky-cta, .bf-sticky-cta) {
  display: none;
}

@media (width <= 720px) {
  /* MATERIAL 3 CHIP-STYLE TABS - Modern 2025 Design */
  :is(.pt-plan-toggle, .bf-plan-toggle) {
    display: flex;
    justify-content: center;
    gap: 8px; /* 8px grid */
    margin-top: 0.4rem;
    margin-right: auto;
    margin-bottom: 1.5rem;
    margin-left: auto;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0; /* No container background */
    background: transparent;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    box-shadow: none;
    width: 100%;
    max-width: 100%;

    /* Sticky positioning preserved */
    position: sticky;
    top: 16px;
    z-index: 100;
    transition: none; /* No container transitions */
  }

  /* Sticky state - no visual change needed (individual chips handle elevation) */
  :is(.pt-plan-toggle, .bf-plan-toggle).is-stuck {
    /* Chips already have elevation, no container change needed */
  }

  :is(.pt-plan-tab, .bf-plan-tab) {
    flex: 1;
    height: 56px; /* Fixed height for equal tabs */
    min-height: 56px; /* 48px minimum + padding for accessibility */
    max-height: 56px; /* Prevent expansion from long text */
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(12px);
    padding-top: 0.5rem;
    padding-right: 0.4rem;
    padding-bottom: 0.5rem;
    padding-left: 0.4rem; /* Tighter padding for more text space */
    border-radius: 16px; /* ShapeScale 12-16px standard */
    font-size: 0.75rem; /* Slightly smaller for long text */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em; /* Tighter tracking */
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden; /* Clip overflowing content */
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(148 163 184 / 15%);
    position: relative;
  }

  :is(.pt-plan-tab, .bf-plan-tab)::after {
    display: none; /* Remove gradient underline from old design */
  }

  :is(.pt-plan-tab, .bf-plan-tab) span {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--shapescale-teal);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  :is(.pt-plan-tab, .bf-plan-tab).is-active {
    background: linear-gradient(135deg, rgb(92 129 255 / 12%), rgb(114 199 197 / 8%));
    color: var(--shape-dark-blue);
    border-color: rgb(92 129 255 / 35%);
    box-shadow:
      0 2px 8px rgb(92 129 255 / 15%),
      0 0 0 2px rgb(92 129 255 / 10%); /* Elevation */

    transform: translateY(-2px); /* Subtle lift */
  }

  :is(.pt-plan-tab, .bf-plan-tab).is-active span {
    color: var(--shapescale-teal);
    opacity: 1;
    font-weight: 600;
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    :is(.pt-plan-tab, .bf-plan-tab) {
      background: rgb(255 255 255 / 8%);
      border-color: rgb(255 255 255 / 12%);
      color: rgb(255 255 255 / 70%);
    }

    :is(.pt-plan-tab, .bf-plan-tab).is-active {
      background: linear-gradient(135deg, rgb(92 129 255 / 20%), rgb(114 199 197 / 15%));
      color: var(--pt-white);
      border-color: rgb(92 129 255 / 50%);
    }
  }

  /* Show one card at a time when tabbed */
  :is(.pt-plan-card, .bf-plan-card) {
    display: none;
  }

  :is(.pt-plan-card, .bf-plan-card).is-active {
    display: flex;
    animation: pt-tab-content-in 160ms ease-out;
  }

  :is(.pt-plan-card, .bf-plan-card).tab-anim {
    animation: pt-tab-content-in 160ms ease-out;
  }

  /* Center the pricing section and allow more width on larger phones */
  :is(.pt-product-grid, .bf-product-grid),
  :is(.pt-plans, .bf-plans) {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  :is(.pt-plans, .bf-plans) h2 {
    font-family: var(--font-family-primary);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.25;
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--shapescale-dark-100);
    margin-bottom: 0.75rem;
  }

  :is(.pt-plans-subtitle, .bf-plans-subtitle) {
    font-family: var(--font-family-primary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
  }

  /* Dark mode support for plan toggle */
  @media (prefers-color-scheme: dark) {
    /* stylelint-disable-next-line no-duplicate-selectors --
       the light-mode rule sits in a sibling media context, so both are required. */
    :is(.pt-plan-toggle, .bf-plan-toggle) {
      background: rgb(30 30 30 / 85%);
      border-color: rgb(255 255 255 / 15%);
      box-shadow: 0 4px 20px rgb(0 0 0 / 40%);
    }

    :is(.pt-plan-toggle, .bf-plan-toggle).is-stuck {
      background: rgb(30 30 30 / 98%);
    }

    :is(.pt-plan-tab, .bf-plan-tab) {
      color: var(--pt-muted-soft);
    }

    :is(.pt-plan-tab, .bf-plan-tab).is-active {
      background: var(--pt-dark-elevated);
      color: var(--pt-white);
      border-color: rgb(255 255 255 / 20%);
    }

    :is(.pt-plan-tab, .bf-plan-tab) span {
      color: var(--shapescale-teal); /* Keep teal for subtext */
    }
  }

  /* Hide in-card full-width CTAs on mobile to avoid CTA competition */
  :is(.pt-plan-card, .bf-plan-card) :is(.pt-btn-full, .bf-btn-full) {
    display: none;
  }

  /* Sticky CTA upgraded to selected-plan bar */
  :is(.pt-sticky-cta, .bf-sticky-cta) {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    padding-right: 1.2rem;
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.35rem);
    padding-left: 1.2rem;

    /* Lighter design - less visually heavy */
    background: rgb(255 255 255 / 92%); /* Light background instead of dark */
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(148 163 184 / 15%); /* Subtle border */
    z-index: 50; /* Stronger blur for iOS feel */
    backdrop-filter: blur(16px); /* Safari support */

    /* Smooth transitions */
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  /* Dark mode support for sticky CTA */
  @media (prefers-color-scheme: dark) {
    :is(.pt-sticky-cta, .bf-sticky-cta) {
      background: rgb(18 18 18 / 92%); /* Dark mode: subtle dark bg */
      border-top-color: rgb(148 163 184 / 25%);
    }
  }

  :is(.pt-sticky-cta-info, .bf-sticky-cta-info) {
    display: none; /* Hide side text on mobile to avoid crowding */
  }

  :is(.pt-sticky-cta-label, .bf-sticky-cta-label) {
    font-size: 0.75rem;
    color: var(--pt-muted-alt);
  }

  :is(.pt-sticky-cta-plan, .bf-sticky-cta-plan) {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pt-dark-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(.pt-sticky-cta-btn, .bf-sticky-cta-btn) {
    flex: 0 1 auto;
    width: min(640px, calc(100vw - 2.4rem));
    max-width: 640px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    white-space: normal;
    text-align: center;
    box-shadow: 0 6px 12px rgb(92 129 255 / 35%);
    position: relative;
  }

  :is(.pt-sticky-cta-btn, .bf-sticky-cta-btn)::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(92 129 255 / 22%);
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    :is(.pt-sticky-cta-btn, .bf-sticky-cta-btn).is-pinging::after {
      animation: pt-cta-ping 0.6s ease-out;
    }
  }

  /* On small screens, keep motion minimal outside sticky CTA */
  @media (width <= 720px) {
    /* Card motion off on small screens; the JS reveal classes set both properties. */
    :is(.pt-plan-card, .bf-plan-card),
    :is(.pt-product-card, .bf-product-card) {
      transition: none !important;
      transform: none !important;
      box-shadow: none;
    }

    :is(.pt-plan-card, .bf-plan-card)::after {
      opacity: 0;
    }

    :is(.pt-plan-card, .bf-plan-card):is(.pt-reveal-card, .bf-reveal-card),
    :is(.pt-plan-card, .bf-plan-card):is(.pt-reveal-card, .bf-reveal-card).is-visible {
      opacity: 1;
      transform: none;
      filter: none;
    }

    :is(.pt-plan-card, .bf-plan-card) img {
      transition: none !important;
      transform: none !important;
    }

    /* MOBILE: Simplify card content - hide metadata rows */
    :is(.pt-plan-kicker, .bf-plan-kicker) {
      display: none; /* Redundant with top badge */
    }

    :is(.pt-plan-note, .bf-plan-note) {
      display: none !important; /* Less important info */
    }

    :is(.pt-plan-eqv, .bf-plan-eqv) {
      display: none !important; /* Metadata not critical on mobile */
    }

    :is(.pt-badges, .bf-badges) {
      display: none; /* Redundant warranty/return info */
    }

    /* Keep feature list but reduce vertical spacing */
    :is(.pt-plan-features, .bf-plan-features) {
      margin-top: 0.75rem;
      margin-right: 0;
      margin-bottom: 0.75rem;
      margin-left: 0;
      gap: 0.35rem; /* Tighter spacing */
    }

    :is(.pt-plan-features, .bf-plan-features) li {
      font-size: 0.75rem; /* Slightly smaller text */
      line-height: 1.4;
    }
  }
}

/* ========================================
   Mobile: Hero Section Ordering (CTA First)
   ======================================== */
@media (width <= 720px) {
  :is(.pt-hero, .bf-hero) {
    display: flex;
    flex-direction: column;
  }

  :is(.pt-hero-content, .bf-hero-content) {
    order: 1;
  }

  :is(.pt-lifetime-highlight, .bf-lifetime-highlight) {
    order: 2;
  }

  :is(.pt-hero-cta, .bf-hero-cta) {
    order: 3;
  }

  :is(.pt-hero-visual, .bf-hero-visual) {
    order: 4; /* Image LAST on mobile - prioritize CTA */
  }
}

/* ========================================
   Mobile: Sticky CTA Phone Button
   ======================================== */
@media (width <= 720px) {
  :is(.pt-sticky-cta, .bf-sticky-cta) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    padding-right: 1rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
  }

  :is(.pt-sticky-phone, .bf-sticky-phone) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgb(92 129 255 / 15%);
    border-radius: 50%;
    color: var(--shape-dark-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.1s ease;
    text-decoration: none;
  }

  :is(.pt-sticky-phone, .bf-sticky-phone):hover,
  :is(.pt-sticky-phone, .bf-sticky-phone):active {
    background: rgb(92 129 255 / 25%);
    transform: scale(0.95);
  }

  :is(.pt-sticky-phone, .bf-sticky-phone) i {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    line-height: 1;
    display: block;
  }

  :is(.pt-sticky-cta-btn, .bf-sticky-cta-btn) {
    flex: 1;
  }
}

/* Hide phone button on desktop - not needed in sticky bar */
@media (width >= 721px) {
  :is(.pt-sticky-phone, .bf-sticky-phone) {
    display: none;
  }
}

/* ========================================
   Mobile: Sales Contact (Below Pricing)
   ======================================== */
@media (width <= 720px) {
  /* Hide desktop sticky bar on mobile */
  :is(.pt-sales-bar, .bf-sales-bar) {
    display: none;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 2rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    padding-top: 1rem;
    padding-right: 1.25rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    background: rgb(248 250 252 / 80%);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(148 163 184 / 20%);
    border-radius: 12px;
    font-size: 0.9rem;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-label, .bf-sales-label) {
    color: var(--text-secondary);
    font-weight: 500;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-phone, .bf-sales-phone) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--shape-dark-blue);
    font-weight: 600;
    text-decoration: none;
    padding-top: 0.35rem;
    padding-right: 0.75rem;
    padding-bottom: 0.35rem;
    padding-left: 0.75rem;
    background: rgb(92 129 255 / 10%);
    border-radius: 999px;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-phone, .bf-sales-phone):hover,
  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-phone, .bf-sales-phone):active {
    background: rgb(92 129 255 / 18%);
    transform: translateY(-1px);
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-phone, .bf-sales-phone) i {
    font-size: 1em;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-divider, .bf-sales-divider) {
    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-email, .bf-sales-email) {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-email, .bf-sales-email):hover,
  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-email, .bf-sales-email):active {
    color: var(--shape-dark-blue);
  }
}

/* Dark mode support for mobile sales contact */
@media (width <= 720px) and (prefers-color-scheme: dark) {
  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) {
    background: rgb(30 30 30 / 60%);
    border-color: rgb(255 255 255 / 10%);
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-phone, .bf-sales-phone) {
    background: rgb(92 129 255 / 20%);
    color: var(--pt-dark-text-soft);
  }

  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-email, .bf-sales-email),
  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-divider, .bf-sales-divider),
  :is(.pt-sales-contact-mobile, .bf-sales-contact-mobile) :is(.pt-sales-label, .bf-sales-label) {
    color: var(--pt-dark-text-soft);
  }
}


/* Dark mode support for plans section headings */
@media (prefers-color-scheme: dark) {
  :is(.pt-plans, .bf-plans) h2 {
    color: var(--pt-white);
  }

  :is(.pt-plans-subtitle, .bf-plans-subtitle) {
    color: var(--text-secondary);
  }
}

/* Dark mode support for logo marquee */
@media (prefers-color-scheme: dark) {
  :is(.pt-logo-marquee, .bf-logo-marquee) {
    background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 3%), transparent);
  }

  :is(.pt-logo-track, .bf-logo-track) img {
    filter: grayscale(100%) opacity(0.35) brightness(1.2);
  }

  :is(.pt-logo-track, .bf-logo-track) img:hover {
    filter: grayscale(0%) opacity(0.8) brightness(1);
  }
}

/* ========================================
   Monthly/Annual Lease CTAs - Smaller Secondary Buttons
   ======================================== */
[data-product-card="monthly_lease"] :is(.pt-btn-primary, .bf-btn-primary),
[data-product-card="annual_lease"] :is(.pt-btn-primary, .bf-btn-primary) {
  /* Compact lease CTAs; overrides the shared button sizing above. */
  padding-top: 0.55rem !important;
  padding-right: 1.4rem !important;
  padding-bottom: 0.55rem !important;
  padding-left: 1.4rem !important;
  font-size: 0.85rem !important;
  font-weight: 600;
}

/* ========================================
   Lifetime CTA - Premium Gradient Button (Larger)
   ShapeScale Design System Compliant
   ======================================== */
[data-product-card="lifetime_purchase"] :is(.pt-btn-primary, .bf-btn-primary),
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-btn-primary, .bf-btn-primary) {
  background: linear-gradient(135deg, var(--shape-dark-blue) 0%, var(--shapescale-teal) 100%);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  padding-top: 0.85rem !important;
  padding-right: 2.25rem !important;
  padding-bottom: 0.85rem !important;
  padding-left: 2.25rem !important;
  font-size: 1.05rem !important;
  font-weight: 650;
  box-shadow: 0 4px 16px rgb(92 129 255 / 35%);
  transition: transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[data-product-card="lifetime_purchase"] :is(.pt-btn-primary, .bf-btn-primary):hover,
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-btn-primary, .bf-btn-primary):hover {
  background: linear-gradient(135deg, var(--pt-blue-violet) 0%, var(--pt-aqua) 100%);
  color: var(--pt-white);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  box-shadow: 0 8px 24px rgb(92 129 255 / 50%);
  transform: translateY(-3px) scale(1.02);
}

[data-product-card="lifetime_purchase"] :is(.pt-btn-primary, .bf-btn-primary):active,
:is(.pt-plan-featured, .bf-plan-featured) :is(.pt-btn-primary, .bf-btn-primary):active {
  transform: translateY(0);
  transition-duration: 50ms;
}

/* Dark mode - gradient stays consistent, adjust shadow */
@media (prefers-color-scheme: dark) {
  [data-product-card="lifetime_purchase"] :is(.pt-btn-primary, .bf-btn-primary),
  :is(.pt-plan-featured, .bf-plan-featured) :is(.pt-btn-primary, .bf-btn-primary) {
    box-shadow: 0 4px 20px rgb(92 129 255 / 50%);
  }

  [data-product-card="lifetime_purchase"] :is(.pt-btn-primary, .bf-btn-primary):hover,
  :is(.pt-plan-featured, .bf-plan-featured) :is(.pt-btn-primary, .bf-btn-primary):hover {
    box-shadow: 0 6px 24px rgb(92 129 255 / 60%);
  }
}