/* ==========================================================================
   Maternal Support Co. - Design System & Global Styles
   Warm Editorial Aesthetic for Maternal & Perinatal Health Practices
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Warm Earthy Color Palette */
  --color-terracotta:        #C47353;
  --color-terracotta-dark:   #A25335;
  --color-terracotta-light:  #F4E8E2;
  --color-terracotta-subtle: #FAF3F0;
  --color-terracotta-border: #FCDCCE;

  --color-sage:        #6E8879;
  --color-sage-dark:   #4F6A5B;
  --color-sage-light:  #EBF1ED;
  --color-sage-subtle: #F4F7F5;
  --color-sage-border: #D6E3DB;

  --color-cream-bg:   #FDFBF7;
  --color-cream-card: #FFFFFF;
  --color-sand:       #EFE9DF;
  --color-sand-light: #F8F5F0;

  --color-charcoal:       #2A2421;
  --color-charcoal-muted: #5C544F;
  --color-charcoal-light: #8E847E;

  --font-serif:   'Playfair Display', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-card:   0 2px 12px rgba(42, 36, 33, 0.05), 0 1px 3px rgba(42, 36, 33, 0.03);
  --shadow-lifted: 0 12px 28px rgba(42, 36, 33, 0.08), 0 4px 10px rgba(42, 36, 33, 0.04);
}

.font-cormorant {
  font-family: var(--font-display);
}


/* Hide scrollbars for clean horizontal swipes */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* --------------------------------------------------------------------------
   Base Typography & Layout
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
  scroll-padding-top: 5rem;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-cream-bg);
  color: var(--color-charcoal);
  line-height: 1.62;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-serif);
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.font-display {
  font-family: var(--font-display);
}

/* Accessible Keyboard Navigation */
:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Background Utilities
   -------------------------------------------------------------------------- */
.bg-warm-grain {
  background-color: var(--color-cream-bg);
  background-image: radial-gradient(rgba(196, 115, 83, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   Prose / Editorial Long-Form Styling
   -------------------------------------------------------------------------- */
.prose-body {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--color-charcoal-muted);
  max-width: 68ch;
}
.prose-body h2 {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-sand);
  padding-bottom: 0.4rem;
}
.prose-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-terracotta-dark);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.prose-body p {
  margin-bottom: 1.25rem;
}
.prose-body ul, .prose-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.prose-body li {
  margin-bottom: 0.4rem;
}
.prose-body blockquote {
  border-left: 3px solid var(--color-terracotta);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-charcoal);
}
.prose-body a {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-body a:hover {
  color: var(--color-terracotta-dark);
}

/* --------------------------------------------------------------------------
   Custom Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--color-cream-bg); }
::-webkit-scrollbar-thumb { background: #D9CFC4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-terracotta); }

/* --------------------------------------------------------------------------
   Button System: Soft Neumorphism 2.0 (Tactile Organic Soft UI)
   Dual Light-Pool Shading & Smooth Spring Compression
   -------------------------------------------------------------------------- */

/* 1. PRIMARY TERRACOTTA BUTTONS (Buy Now, Inquire, Checkout, Submit, High-Conversion CTAs) */
.btn-terracotta,
a.btn-terracotta,
button.btn-terracotta,
[data-buy-now],
#cart-checkout-btn,
#razorpay-pay-btn,
#btn-unlock-report,
#buy-now-cta,
#sticky-buy-now,
button[class*="bg-[#C47353]"],
a[class*="bg-[#C47353]"],
button[class*="bg-terracotta"],
a[class*="bg-terracotta"],
form button[type="submit"]:not([class*="underline"]):not([class*="bg-transparent"]):not([class*="text-"]):not([class*="cat-pill"]),
button[onclick*="triggerDirectBuy"] {
  background: #C47353 !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.015em;
  border: 1px solid rgba(196, 115, 83, 0.25) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease !important;
  /* Soft Neumorphism 2.0: Dual light-pool ambient shading + soft top luster */
  box-shadow:
    4px 4px 14px rgba(140, 50, 20, 0.25),
    -3px -3px 10px rgba(255, 175, 145, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.btn-terracotta:hover,
a.btn-terracotta:hover,
button.btn-terracotta:hover,
[data-buy-now]:hover,
#cart-checkout-btn:hover,
#razorpay-pay-btn:hover,
#btn-unlock-report:hover,
#buy-now-cta:hover,
#sticky-buy-now:hover,
button[class*="bg-[#C47353]"]:hover,
a[class*="bg-[#C47353]"]:hover,
button[class*="bg-terracotta"]:hover,
a[class*="bg-terracotta"]:hover,
form button[type="submit"]:not([class*="underline"]):not([class*="bg-transparent"]):not([class*="text-"]):not([class*="cat-pill"]):hover,
button[onclick*="triggerDirectBuy"]:hover {
  background: #CB7C5D !important;
  transform: translateY(-1.5px) !important;
  box-shadow:
    6px 6px 18px rgba(140, 50, 20, 0.32),
    -4px -4px 12px rgba(255, 175, 145, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.btn-terracotta:active,
a.btn-terracotta:active,
button.btn-terracotta:active,
[data-buy-now]:active,
#cart-checkout-btn:active,
#razorpay-pay-btn:active,
#btn-unlock-report:active,
#buy-now-cta:active,
#sticky-buy-now:active,
button[class*="bg-[#C47353]"]:active,
a[class*="bg-[#C47353]"]:active,
button[class*="bg-terracotta"]:active,
a[class*="bg-terracotta"]:active,
form button[type="submit"]:not([class*="underline"]):not([class*="bg-transparent"]):not([class*="text-"]):not([class*="cat-pill"]):active,
button[onclick*="triggerDirectBuy"]:active {
  transform: translateY(0.5px) scale(0.99) !important;
  /* Tactile Inset Compression into the surface */
  box-shadow:
    inset 3px 3px 6px rgba(80, 25, 10, 0.4),
    inset -2px -2px 5px rgba(255, 175, 145, 0.25) !important;
}


/* Product Page Primary CTAs (Buy Now & Add to Cart) - PC & Mobile Generous Padding */
#buy-now-cta,
#add-to-cart-cta {
  min-height: 52px !important;
  padding: 15px 16px !important;
  font-size: 0.84rem !important; /* 13.5px */
  gap: 0.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.015em !important;
}

@media (min-width: 640px) {
  #buy-now-cta,
  #add-to-cart-cta {
    min-height: 54px !important;
    padding: 15px 16px !important;
    font-size: 0.845rem !important; /* 13.5px */
    gap: 0.4rem !important;
  }
}

/* 2. SECONDARY NEUTRAL & WHITE BUTTONS (Add to Cart, View Details, White Action Buttons) */
[data-add-to-cart],
.add-to-cart-btn,
#add-to-cart-cta,
#sticky-add-to-cart,
.btn-white,
a.btn-white,
button.btn-white,
#msc-cookie-essential-only,
button[class*="bg-white"][class*="border"]:not(.thumb-btn):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-6"]):not([class*="h-1.5"]):not([class*="h-1"]):not([class*="rounded-full"]):not([class*="cat-pill"]),
a[class*="bg-white"][class*="border"][class*="rounded"][class*="px-"]:not([class*="cat-pill"]) {
  background: #FDFBF7 !important;
  color: #2A2421 !important;
  font-family: var(--font-sans);
  border: 1px solid rgba(230, 220, 210, 0.75) !important;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              color 0.22s ease !important;
  /* Soft Neumorphism 2.0 on Warm Stone */
  box-shadow:
    4px 4px 12px rgba(42, 36, 33, 0.08),
    -3px -3px 10px rgba(255, 255, 255, 0.95) !important;
}

[data-add-to-cart]:hover,
.add-to-cart-btn:hover,
#add-to-cart-cta:hover,
#sticky-add-to-cart:hover,
.btn-white:hover,
a.btn-white:hover,
button.btn-white:hover,
#msc-cookie-essential-only:hover,
button[class*="bg-white"][class*="border"]:not(.thumb-btn):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-6"]):not([class*="h-1.5"]):not([class*="h-1"]):not([class*="rounded-full"]):not([class*="cat-pill"]):hover,
a[class*="bg-white"][class*="border"][class*="rounded"][class*="px-"]:not([class*="cat-pill"]):hover {
  transform: translateY(-1.5px) !important;
  border-color: rgba(196, 115, 83, 0.45) !important;
  color: #C47353 !important;
  box-shadow:
    6px 6px 16px rgba(42, 36, 33, 0.11),
    -4px -4px 14px rgba(255, 255, 255, 1) !important;
}

[data-add-to-cart]:active,
.add-to-cart-btn:active,
#add-to-cart-cta:active,
#sticky-add-to-cart:active,
.btn-white:active,
a.btn-white:active,
button.btn-white:active,
#msc-cookie-essential-only:active,
button[class*="bg-white"][class*="border"]:not(.thumb-btn):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-6"]):not([class*="h-1.5"]):not([class*="h-1"]):not([class*="rounded-full"]):not([class*="cat-pill"]):active,
a[class*="bg-white"][class*="border"][class*="rounded"][class*="px-"]:not([class*="cat-pill"]):active {
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow:
    inset 3px 3px 6px rgba(42, 36, 33, 0.09),
    inset -2px -2px 5px rgba(255, 255, 255, 0.8) !important;
}

/* 3. CHARCOAL & DARK LUXURY BUTTONS (Cart Promo, Primary Dark CTAs) */
.btn-charcoal,
a.btn-charcoal,
button.btn-charcoal,
#cart-apply-promo-btn,
button[class*="bg-[#2A2421]"]:not([class*="cat-pill"]):not(.home-cat-tab):not(.blog-pill):not(.res-tab),
a[class*="bg-[#2A2421]"]:not([class*="cat-pill"]),
button[class*="bg-charcoal"]:not([class*="cat-pill"]),
a[class*="bg-charcoal"]:not([class*="cat-pill"]) {
  background: #2A2421 !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease !important;
  box-shadow:
    4px 4px 14px rgba(0, 0, 0, 0.35),
    -3px -3px 10px rgba(65, 55, 50, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
}

.btn-charcoal:hover,
a.btn-charcoal:hover,
button.btn-charcoal:hover,
#cart-apply-promo-btn:hover,
button[class*="bg-[#2A2421]"]:not([class*="cat-pill"]):not(.home-cat-tab):not(.blog-pill):not(.res-tab):hover,
a[class*="bg-[#2A2421]"]:not([class*="cat-pill"]):hover,
button[class*="bg-charcoal"]:not([class*="cat-pill"]):hover,
a[class*="bg-charcoal"]:not([class*="cat-pill"]):hover {
  background: #342D29 !important;
  transform: translateY(-1.5px) !important;
  box-shadow:
    6px 6px 18px rgba(0, 0, 0, 0.45),
    -4px -4px 12px rgba(75, 65, 60, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

.btn-charcoal:active,
a.btn-charcoal:active,
button.btn-charcoal:active,
#cart-apply-promo-btn:active,
button[class*="bg-[#2A2421]"]:not([class*="cat-pill"]):not(.home-cat-tab):not(.blog-pill):not(.res-tab):active,
a[class*="bg-[#2A2421]"]:not([class*="cat-pill"]):active,
button[class*="bg-charcoal"]:not([class*="cat-pill"]):active,
a[class*="bg-charcoal"]:not([class*="cat-pill"]):active {
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.6),
    inset -2px -2px 5px rgba(60, 50, 45, 0.3) !important;
}

/* 4. PERINATAL SAGE GREEN BUTTONS */
.btn-sage,
a.btn-sage,
button.btn-sage,
button[class*="bg-[#3E5645]"],
button[class*="bg-[#4A5D4E]"],
button[class*="bg-[#314637]"] {
  background: #6E8879 !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.015em;
  border: 1px solid rgba(110, 136, 121, 0.3) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease !important;
  box-shadow:
    4px 4px 14px rgba(45, 70, 55, 0.28),
    -3px -3px 10px rgba(160, 195, 175, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.btn-sage:hover,
a.btn-sage:hover,
button.btn-sage:hover,
button[class*="bg-[#3E5645]"]:hover,
button[class*="bg-[#4A5D4E]"]:hover,
button[class*="bg-[#314637]"]:hover {
  background: #789383 !important;
  transform: translateY(-1.5px) !important;
  box-shadow:
    6px 6px 18px rgba(45, 70, 55, 0.35),
    -4px -4px 12px rgba(160, 195, 175, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.btn-sage:active,
a.btn-sage:active,
button.btn-sage:active,
button[class*="bg-[#3E5645]"]:active,
button[class*="bg-[#4A5D4E]"]:active,
button[class*="bg-[#314637]"]:active {
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow:
    inset 3px 3px 6px rgba(30, 50, 40, 0.4),
    inset -2px -2px 5px rgba(160, 195, 175, 0.25) !important;
}

/* 5. OUTLINE TERRACOTTA BUTTONS */
.btn-outline-terracotta,
a.btn-outline-terracotta,
button.btn-outline-terracotta {
  background: #FAF7F2 !important;
  border: 1.5px solid #C47353 !important;
  color: #C47353 !important;
  font-family: var(--font-sans);
  font-weight: 600;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease,
              color 0.22s ease !important;
  box-shadow:
    3px 3px 10px rgba(196, 115, 83, 0.12),
    -2px -2px 8px rgba(255, 255, 255, 0.9) !important;
}

.btn-outline-terracotta:hover,
a.btn-outline-terracotta:hover,
button.btn-outline-terracotta:hover {
  transform: translateY(-1.5px) !important;
  background: #C47353 !important;
  color: #FFFFFF !important;
  box-shadow:
    5px 5px 16px rgba(140, 50, 20, 0.28),
    -3px -3px 10px rgba(255, 175, 145, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.btn-outline-terracotta:active,
a.btn-outline-terracotta:active,
button.btn-outline-terracotta:active {
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow:
    inset 3px 3px 6px rgba(80, 25, 10, 0.4),
    inset -2px -2px 5px rgba(255, 175, 145, 0.25) !important;
}

/* 6. ROUND ICON BUTTONS & NAV TOGGLES (Cart Drawer Trigger, Mobile Hamburger, Modal Close, Carousels) */
.header-cart-btn,
button[data-open-cart],
button#mobile-menu-toggle,
button#cart-close-btn,
button#checkout-modal-close,
button#mobile-nav-close-btn,
button#quickview-close-btn,
button[onclick*="scrollSectionTrack"],
button[onclick*="prevSlide"],
button[onclick*="nextSlide"] {
  background: #FDFBF7 !important;
  border: 1px solid rgba(230, 220, 210, 0.75) !important;
  color: #2A2421;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              color 0.22s ease !important;
  /* Soft Neumorphism 2.0 Dome */
  box-shadow:
    3px 3px 10px rgba(42, 36, 33, 0.07),
    -2px -2px 8px rgba(255, 255, 255, 0.95) !important;
}

.header-cart-btn:hover,
button[data-open-cart]:hover,
button#mobile-menu-toggle:hover,
button#cart-close-btn:hover,
button#checkout-modal-close:hover,
button#mobile-nav-close-btn:hover,
button#quickview-close-btn:hover,
button[onclick*="scrollSectionTrack"]:hover,
button[onclick*="prevSlide"]:hover,
button[onclick*="nextSlide"]:hover {
  transform: translateY(-1.5px) !important;
  border-color: rgba(196, 115, 83, 0.45) !important;
  color: #C47353 !important;
  box-shadow:
    5px 5px 14px rgba(42, 36, 33, 0.1),
    -3px -3px 10px rgba(255, 255, 255, 1) !important;
}

.header-cart-btn:active,
button[data-open-cart]:active,
button#mobile-menu-toggle:active,
button#cart-close-btn:active,
button#checkout-modal-close:active,
button#mobile-nav-close-btn:active,
button#quickview-close-btn:active,
button[onclick*="scrollSectionTrack"]:active,
button[onclick*="prevSlide"]:active,
button[onclick*="nextSlide"]:active {
  transform: translateY(0.5px) scale(0.96) !important;
  box-shadow:
    inset 2px 2px 5px rgba(42, 36, 33, 0.09),
    inset -1px -1px 3px rgba(255, 255, 255, 0.8) !important;
}

/* 7. CATEGORY PILLS & INTERACTIVE PRESET BUTTONS */
.cat-pill,
.calc-preset-pill {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease !important;
  background: #FDFBF7 !important;
  border: 1px solid rgba(230, 220, 210, 0.75) !important;
  box-shadow:
    2px 2px 6px rgba(42, 36, 33, 0.05),
    -2px -2px 6px rgba(255, 255, 255, 0.9) !important;
}

.cat-pill:hover,
.calc-preset-pill:hover {
  transform: translateY(-1px) !important;
  border-color: #C47353 !important;
  color: #C47353 !important;
  box-shadow:
    4px 4px 10px rgba(196, 115, 83, 0.15),
    -2px -2px 8px rgba(255, 255, 255, 1) !important;
}

.cat-pill.active,
.cat-pill[class*="bg-[#2A2421]"],
.calc-preset-pill.active {
  background: #C47353 !important;
  color: #FFFFFF !important;
  border-color: #C47353 !important;
  box-shadow:
    inset 2px 2px 5px rgba(80, 25, 10, 0.35),
    inset -1px -1px 4px rgba(255, 175, 145, 0.2) !important;
}

/* Redesigned Clean Segmented Category Tabs (Homepage & Blog) */
.home-cat-tab,
.blog-pill,
.res-tab {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 9999px !important;
  letter-spacing: -0.01em;
}

.home-cat-tab:not(.active),
.blog-pill:not(.active):not([class*="bg-[#2A2421]"]),
.res-tab:not(.active):not([class*="bg-[#2A2421]"]) {
  background: #FFFFFF !important;
  color: #5C544F !important;
  border: 1px solid #EFE9DF !important;
  box-shadow: 0 1px 3px rgba(42, 36, 33, 0.04) !important;
}

.home-cat-tab:not(.active):hover,
.blog-pill:not(.active):not([class*="bg-[#2A2421]"]):hover,
.res-tab:not(.active):not([class*="bg-[#2A2421]"]):hover {
  background: #FAF7F2 !important;
  color: #2A2421 !important;
  border-color: rgba(196, 115, 83, 0.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(42, 36, 33, 0.06) !important;
}

.home-cat-tab.active,
.blog-pill.active,
.blog-pill[class*="bg-[#2A2421]"],
.res-tab.active,
.res-tab[class*="bg-[#2A2421]"] {
  background: #2A2421 !important;
  color: #FFFFFF !important;
  border: 1px solid #2A2421 !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(42, 36, 33, 0.18) !important;
}

/* 8. PAYPAL INSTANT CHECKOUT BUTTONS */
#cart-paypal-btn,
#paypal-buy-cta,
button[id*="paypal"] {
  background: #FFC439 !important;
  border: 1px solid rgba(220, 160, 20, 0.35) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease !important;
  box-shadow:
    4px 4px 14px rgba(190, 130, 10, 0.28),
    -3px -3px 10px rgba(255, 230, 150, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

#cart-paypal-btn:hover,
#paypal-buy-cta:hover,
button[id*="paypal"]:hover {
  transform: translateY(-1.5px) !important;
  background: #FFCD4F !important;
  box-shadow:
    6px 6px 18px rgba(190, 130, 10, 0.36),
    -4px -4px 12px rgba(255, 230, 150, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
}

#cart-paypal-btn:active,
#paypal-buy-cta:active,
button[id*="paypal"]:active {
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow:
    inset 3px 3px 6px rgba(140, 90, 10, 0.4),
    inset -2px -2px 5px rgba(255, 230, 150, 0.3) !important;
}

/* Article Body CTA Buttons - High Contrast Enforcement & Soft Neumorphism 2.0 */
.article-body a.inline-block,
.article-body a.inline-flex,
.article-body a.btn,
.article-body a.btn-terracotta,
.article-body a[class*="bg-"],
.article-body a[class*="btn-"],
.article-body button {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: #C47353 !important;
  box-shadow:
    4px 4px 14px rgba(140, 50, 20, 0.25),
    -3px -3px 10px rgba(255, 175, 145, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.article-body a.inline-block:hover,
.article-body a.inline-flex:hover,
.article-body a.btn:hover,
.article-body a.btn-terracotta:hover,
.article-body a[class*="bg-"]:hover,
.article-body a[class*="btn-"]:hover,
.article-body button:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transform: translateY(-1.5px) !important;
  background: #CB7C5D !important;
  box-shadow:
    6px 6px 18px rgba(140, 50, 20, 0.32),
    -4px -4px 12px rgba(255, 175, 145, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================================================
   BUTTON & INTERACTIVE ELEMENT TEXT SELECTION
   Fix: When users select/copy button text, prevent selection text colors from
   matching button background (terracotta on terracotta blending bug).
   Provides high-contrast, crystal-clear readable selection on all buttons.
   ========================================================================== */

/* 1. Terracotta buttons & high-conversion CTAs (Check Eligibility, Buy Now, Inquire, Checkout, Submit) */
.btn-terracotta::selection,
.btn-terracotta *::selection,
a.btn-terracotta::selection,
a.btn-terracotta *::selection,
button.btn-terracotta::selection,
button.btn-terracotta *::selection,
.btn-terracotta-glow::selection,
.btn-terracotta-glow *::selection,
[data-buy-now]::selection,
[data-buy-now] *::selection,
#cart-checkout-btn::selection,
#cart-checkout-btn *::selection,
#razorpay-pay-btn::selection,
#razorpay-pay-btn *::selection,
#btn-unlock-report::selection,
#btn-unlock-report *::selection,
#btn-check-medicaid::selection,
#btn-check-medicaid *::selection,
#buy-now-cta::selection,
#buy-now-cta *::selection,
#sticky-buy-now::selection,
#sticky-buy-now *::selection,
button[class*="bg-[#C47353]"]::selection,
button[class*="bg-[#C47353]"] *::selection,
a[class*="bg-[#C47353]"]::selection,
a[class*="bg-[#C47353]"] *::selection,
button[class*="bg-terracotta"]::selection,
button[class*="bg-terracotta"] *::selection,
a[class*="bg-terracotta"]::selection,
a[class*="bg-terracotta"] *::selection,
button[class*="bg-[#A85A3C]"]::selection,
button[class*="bg-[#A85A3C]"] *::selection,
a[class*="bg-[#A85A3C]"]::selection,
a[class*="bg-[#A85A3C]"] *::selection,
form button[type="submit"]:not([class*="underline"]):not([class*="bg-transparent"]):not([class*="text-"]):not([class*="cat-pill"])::selection,
form button[type="submit"]:not([class*="underline"]):not([class*="bg-transparent"]):not([class*="text-"]):not([class*="cat-pill"]) *::selection,
button[onclick*="triggerDirectBuy"]::selection,
button[onclick*="triggerDirectBuy"] *::selection,
.cat-pill.active::selection,
.cat-pill.active *::selection,
.calc-preset-pill.active::selection,
.calc-preset-pill.active *::selection {
  background: #2D2825 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.btn-terracotta::-moz-selection,
.btn-terracotta *::-moz-selection,
a.btn-terracotta::-moz-selection,
a.btn-terracotta *::-moz-selection,
button.btn-terracotta::-moz-selection,
button.btn-terracotta *::-moz-selection,
#btn-check-medicaid::-moz-selection,
#btn-check-medicaid *::-moz-selection,
#btn-unlock-report::-moz-selection,
#btn-unlock-report *::-moz-selection {
  background: #2D2825 !important;
  color: #FFFFFF !important;
}

/* 2. Charcoal & Dark luxury buttons */
.btn-charcoal::selection,
.btn-charcoal *::selection,
a.btn-charcoal::selection,
a.btn-charcoal *::selection,
button.btn-charcoal::selection,
button.btn-charcoal *::selection,
#cart-apply-promo-btn::selection,
#cart-apply-promo-btn *::selection,
button[class*="bg-[#2A2421]"]:not([class*="cat-pill"])::selection,
button[class*="bg-[#2A2421]"]:not([class*="cat-pill"]) *::selection,
a[class*="bg-[#2A2421]"]:not([class*="cat-pill"])::selection,
a[class*="bg-[#2A2421]"]:not([class*="cat-pill"]) *::selection,
button[class*="bg-charcoal"]:not([class*="cat-pill"])::selection,
button[class*="bg-charcoal"]:not([class*="cat-pill"]) *::selection,
a[class*="bg-charcoal"]:not([class*="cat-pill"])::selection,
a[class*="bg-charcoal"]:not([class*="cat-pill"]) *::selection {
  background: #C47353 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 3. Sage buttons */
.btn-sage::selection,
.btn-sage *::selection,
a.btn-sage::selection,
a.btn-sage *::selection,
button.btn-sage::selection,
button.btn-sage *::selection,
button[class*="bg-[#3E5645]"]::selection,
button[class*="bg-[#3E5645]"] *::selection,
button[class*="bg-[#4A5D4E]"]::selection,
button[class*="bg-[#4A5D4E]"] *::selection,
button[class*="bg-[#314637]"]::selection,
button[class*="bg-[#314637]"] *::selection {
  background: #2D2825 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 4. White & Outline buttons */
.btn-white::selection,
.btn-white *::selection,
a.btn-white::selection,
a.btn-white *::selection,
button.btn-white::selection,
button.btn-white *::selection,
.btn-outline-terracotta::selection,
.btn-outline-terracotta *::selection,
a.btn-outline-terracotta::selection,
a.btn-outline-terracotta *::selection,
button.btn-outline-terracotta::selection,
button.btn-outline-terracotta *::selection,
[data-add-to-cart]::selection,
[data-add-to-cart] *::selection,
.add-to-cart-btn::selection,
.add-to-cart-btn *::selection,
#add-to-cart-cta::selection,
#add-to-cart-cta *::selection,
#sticky-add-to-cart::selection,
#sticky-add-to-cart *::selection {
  background: #C47353 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 5. PayPal buttons */
#cart-paypal-btn::selection,
#cart-paypal-btn *::selection,
#paypal-buy-cta::selection,
#paypal-buy-cta *::selection,
button[id*="paypal"]::selection,
button[id*="paypal"] *::selection {
  background: #2D2825 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 6. Universal Button Catch-All */
button::selection,
button *::selection,
[role="button"]::selection,
[role="button"] *::selection {
  background: #2D2825 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

button::-moz-selection,
button *::-moz-selection,
[role="button"]::-moz-selection,
[role="button"] *::-moz-selection {
  background: #2D2825 !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Footer Navigation Links Guard (Plain text links, never styled as buttons)
   -------------------------------------------------------------------------- */
footer a:not(.btn):not([class*="btn-"]):not([data-buy-now]) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

.btn-ghost {
  color: var(--color-terracotta);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.btn-ghost:hover {
  color: var(--color-terracotta-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: translateX(2px);
}
.header-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  background: linear-gradient(135deg, #C47353 0%, #A25335 100%);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FAF7F2;
  box-shadow: 0 2px 6px rgba(162, 83, 53, 0.45);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Segmented Media Toggle (Photos vs Video) */
.media-toggle-pill {
  padding: 0.35rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid transparent;
}
.media-toggle-pill.active {
  background-color: #FFFFFF;
  color: #2A2421;
  box-shadow: 0 2px 8px -1px rgba(42, 36, 33, 0.08), 0 1px 2px rgba(42, 36, 33, 0.04);
  border-color: rgba(239, 233, 223, 0.8);
}
.media-toggle-pill:not(.active) {
  background: transparent;
  color: #706863;
}
.media-toggle-pill:not(.active):hover {
  color: #2A2421;
  background: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Cards & Elevated Surfaces
   -------------------------------------------------------------------------- */
.glass-nav {
  background-color: #FDFBF7;
  background: #FDFBF7;
  border-bottom: 1px solid rgba(235, 227, 216, 0.85);
  box-shadow: 0 1px 8px rgba(42, 36, 33, 0.025);
  transform: translateZ(0);
  /* contain: layout paint removed for dropdown */
  isolation: isolate;
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lifted);
  border-color: color-mix(in srgb, var(--color-terracotta) 20%, var(--color-sand));
}

.product-card {
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #EAE3D9;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(42, 36, 33, 0.09), 0 4px 12px -2px rgba(42, 36, 33, 0.03);
  border-color: #DFD3C3;
}

.badge-bestseller {
  background: #FFF1EB;
  color: var(--color-terracotta);
  border: 1px solid var(--color-terracotta-border);
}

.badge-new {
  background: #EBF1ED;
  color: var(--color-sage-dark);
  border: 1px solid var(--color-sage-border);
}

.quote-decor {
  font-family: var(--font-display);
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(196, 115, 83, 0.18);
  user-select: none;
  pointer-events: none;
}

.testimonial-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  border: 1px solid var(--color-sand);
  box-shadow: 0 4px 20px -2px rgba(42, 36, 33, 0.04), 0 2px 6px -1px rgba(42, 36, 33, 0.02);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -4px rgba(42, 36, 33, 0.08), 0 4px 12px -2px rgba(42, 36, 33, 0.04);
  border-color: #FCDCCE;
}

/* --------------------------------------------------------------------------
   HAMBURGER & MOBILE MENU START (Ultra-Smooth Animation Engine)
   -------------------------------------------------------------------------- */
#mobile-nav-drawer {
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

#mobile-nav-drawer.open,
#mobile-nav-drawer.is-open {
  transform: translateX(0) !important;
}

#mobile-nav-drawer-backdrop {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s ease !important;
  will-change: opacity, backdrop-filter;
}

#mobile-nav-drawer-backdrop.open,
#mobile-nav-drawer-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Staggered entrance animation for links inside mobile nav when opened */
#mobile-nav-drawer.is-open .mobile-nav-link,
#mobile-nav-drawer.open .mobile-nav-link,
#mobile-nav-drawer.is-open .category-card,
#mobile-nav-drawer.open .category-card,
#mobile-nav-drawer.is-open .booking-banner,
#mobile-nav-drawer.open .booking-banner {
  animation: mobileNavStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(1) { animation-delay: 0.04s; }
#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(2) { animation-delay: 0.08s; }
#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(3) { animation-delay: 0.12s; }
#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(4) { animation-delay: 0.16s; }
#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(5) { animation-delay: 0.20s; }
#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(6) { animation-delay: 0.24s; }
#mobile-nav-drawer.is-open .mobile-nav-link:nth-child(7) { animation-delay: 0.28s; }

@keyframes mobileNavStaggerIn {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Interactive feedback on hamburger toggle button */
#mobile-menu-toggle {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease !important;
}

#mobile-menu-toggle:active {
  transform: scale(0.88) rotate(-8deg) !important;
}

#mobile-menu-toggle.is-active,
#mobile-menu-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
  background-color: #FAF3ED !important;
  border-color: #C47353 !important;
  color: #C47353 !important;
}

.drawer-backdrop { transition: opacity 0.35s ease; }
.drawer-panel    { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
/* HAMBURGER & MOBILE MENU END */

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Mobile-First Horizontal Swipe (Clean Horizontal Scroll)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .mobile-horizontal-swipe {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1.25rem !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    margin-top: 1rem !important;
    gap: 1rem !important;
    scrollbar-width: none !important; /* Firefox */
  }
  .mobile-horizontal-swipe::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }
  .mobile-horizontal-swipe > * {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  .mobile-swipe-indicators {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.5rem !important;
  }
}

/* Responsive mobile scaling for interactive cards and checkout modal */
@media (max-width: 640px) {
  .svc-card {
    padding: 1.125rem !important;
  }
  #checkout-modal .max-w-lg {
    max-height: 94dvh !important;
  }
}

@media (min-width: 1024px) {
  .mobile-horizontal-swipe {
    display: grid !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 2rem !important;
  }
  .mobile-horizontal-swipe > * {
    flex: initial !important;
    max-width: none !important;
    scroll-snap-align: none !important;
  }
  .mobile-swipe-indicators {
    display: none !important;
  }
}


html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   Sleek Global Page Preloader
   Glassmorphic dark backdrop, dual-ring glowing spinner, and cubic-bezier fade
   -------------------------------------------------------------------------- */
#global-preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 22, 20, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, visibility;
}

#global-preloader.preloader-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#global-preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-spinner-container {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer decorative ring */
.preloader-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(244, 232, 226, 0.12);
  border-top-color: #C47353;
  border-bottom-color: rgba(196, 115, 83, 0.35);
  animation: preloader-spin-cw 0.75s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  box-shadow: 0 0 18px rgba(196, 115, 83, 0.25);
}

/* Inner counter-rotating ring */
.preloader-ring-inner {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: #EFE9DF;
  border-right-color: rgba(110, 136, 121, 0.7);
  animation: preloader-spin-ccw 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Center subtle glowing accent */
.preloader-glow-center {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #C47353 0%, rgba(196, 115, 83, 0.2) 75%);
  animation: preloader-glow-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 12px 3px rgba(196, 115, 83, 0.45);
}

/* Optional subtle brand mark text */
.preloader-brand-text {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FAF3F0;
  opacity: 0.85;
  animation: preloader-text-pulse 2s ease-in-out infinite;
}

@keyframes preloader-spin-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes preloader-spin-ccw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes preloader-glow-pulse {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 16px 5px rgba(196, 115, 83, 0.65);
  }
}

@keyframes preloader-text-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.95; }
}

/* ==========================================================================
   PREMIUM ANIMATION SYSTEM
   Scroll reveals, micro-interactions, live ambient effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ambient Floating Blobs (Hero background orbs)
   -------------------------------------------------------------------------- */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: layout paint;
  filter: blur(8px);
}
.blob-terracotta {
  background: radial-gradient(circle, rgba(196,115,83,0.16) 0%, rgba(196,115,83,0.08) 40%, rgba(196,115,83,0.02) 65%, transparent 75%);
  animation: blob-drift-1 18s ease-in-out infinite alternate;
}
.blob-sage {
  background: radial-gradient(circle, rgba(110,136,121,0.14) 0%, rgba(110,136,121,0.07) 40%, rgba(110,136,121,0.02) 65%, transparent 75%);
  animation: blob-drift-2 22s ease-in-out infinite alternate;
}
.blob-cream {
  background: radial-gradient(circle, rgba(239,233,223,0.40) 0%, rgba(239,233,223,0.15) 45%, transparent 70%);
  animation: blob-drift-3 15s ease-in-out infinite alternate;
}

@keyframes blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.08); }
  66%  { transform: translate(-20px, 20px) scale(0.96); }
  100% { transform: translate(30px, 10px) scale(1.04); }
}
@keyframes blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-50px, 25px) scale(1.06); }
  70%  { transform: translate(30px, -15px) scale(0.97); }
  100% { transform: translate(-20px, -30px) scale(1.03); }
}
@keyframes blob-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, -40px) scale(1.1); }
  100% { transform: translate(-10px, 15px) scale(0.95); }
}

/* --------------------------------------------------------------------------
   Shimmer Effect (for badges, highlights)
   -------------------------------------------------------------------------- */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}
.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: shimmer-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer-sweep {
  0%   { left: -100%; }
  40%, 100% { left: 160%; }
}

/* --------------------------------------------------------------------------
   Cards: Clean Elevation Hover (Tilt effect removed globally)
   -------------------------------------------------------------------------- */
.magnetic-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
  will-change: transform;
}
.magnetic-card:hover {
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Counting Number Animation
   -------------------------------------------------------------------------- */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Gradient Text
   -------------------------------------------------------------------------- */
.gradient-text {
  background: linear-gradient(135deg, #C47353 0%, #A25335 50%, #6E8879 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-warm {
  background: linear-gradient(135deg, #C47353 0%, #E8956A 50%, #C47353 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* --------------------------------------------------------------------------
   Premium Bottom Nav Active State Pulse
   -------------------------------------------------------------------------- */
.bottom-nav-item.active-nav {
  color: #C47353;
}
.bottom-nav-item.active-nav i {
  filter: drop-shadow(0 0 6px rgba(196,115,83,0.5));
  animation: nav-icon-bounce 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nav-icon-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Section Divider (decorative wavy line)
   -------------------------------------------------------------------------- */
.section-divider {
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C47353, #6E8879);
  margin: 0 auto 1.5rem;
}

/* --------------------------------------------------------------------------
   Stat Counter Cards (premium trust section)
   -------------------------------------------------------------------------- */
.stat-card {
  background: white;
  border: 1px solid #EFE9DF;
  border-radius: 1.25rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C47353, #6E8879);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card:hover::before {
  transform: scaleX(1);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(42,36,33,0.10);
  border-color: rgba(196,115,83,0.25);
}

/* --------------------------------------------------------------------------
   Scroll Progress Bar
   -------------------------------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, #C47353, #6E8879, #C47353);
  background-size: 200% 100%;
  z-index: 10000;
  animation: gradient-shift 3s ease infinite;
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(196,115,83,0.5);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Enhanced Glass Nav on Scroll
   -------------------------------------------------------------------------- */
.glass-nav.scrolled {
  background-color: #FDFBF7;
  background: #FDFBF7;
  box-shadow: 0 4px 24px rgba(42, 36, 33, 0.07);
  border-bottom-color: rgba(196, 115, 83, 0.15);
}

/* --------------------------------------------------------------------------
   Floating CTA pulse (hero section)
   -------------------------------------------------------------------------- */
.pulse-ring {
  position: relative;
  display: inline-flex;
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(196, 115, 83, 0.4);
  animation: pulse-expand 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-expand {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Typewriter cursor blink
   -------------------------------------------------------------------------- */
.typewriter-cursor::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: #C47353;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Horizontal scrolling marquee (trust logos / stats strip)
   -------------------------------------------------------------------------- */
.marquee-track {
  display: flex;
  gap: 3rem;
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Premium bottom nav glassmorphism upgrade
   -------------------------------------------------------------------------- */
#bottom-app-nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(239, 233, 223, 0.8);
  box-shadow: 0 -4px 24px rgba(42, 36, 33, 0.06);
  transform: translateZ(0);
}

/* HAMBURGER & MOBILE MENU START */
#mobile-menu-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;
}
#mobile-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
  width: 88vw !important;
  max-width: 24rem !important;
  z-index: 99999 !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
}
#mobile-nav-drawer.is-open,
#mobile-nav-drawer.open {
  transform: translateX(0) !important;
}
#mobile-nav-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  background-color: rgba(42, 36, 33, 0.6) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  touch-action: manipulation;
}
#mobile-nav-drawer-backdrop.is-open,
#mobile-nav-drawer-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile Nav Internal Scroll Engine & Responsive Layout */
#mobile-nav-scroll-area {
  flex: 1 1 0% !important;
  min-height: 0 !important; /* Critical: allows flex child to scroll properly */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scroll-behavior: smooth;
}

/* Sleek Minimal Scrollbar for Mobile Menu */
#mobile-nav-scroll-area::-webkit-scrollbar {
  width: 3px;
}
#mobile-nav-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
#mobile-nav-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(196, 115, 83, 0.3);
  border-radius: 9999px;
}

/* Compact Responsive Optimization for Mobile Screens (Height <= 750px) */
@media (max-height: 750px) {
  #mobile-nav-drawer .drawer-header {
    padding: 0.85rem 1rem !important;
  }
  #mobile-nav-drawer .booking-banner {
    padding: 0.5rem 0.85rem !important;
  }
  #mobile-nav-drawer .booking-banner a {
    padding: 0.5rem 0.75rem !important;
  }
  #mobile-nav-drawer .mobile-nav-link {
    padding-top: 0.42rem !important;
    padding-bottom: 0.42rem !important;
    font-size: 0.77rem !important;
  }
  #mobile-nav-drawer .drawer-footer {
    padding: 0.65rem 1rem !important;
    gap: 0.35rem !important;
  }
  #mobile-nav-drawer .category-card {
    padding: 0.45rem 0.6rem !important;
  }
}
/* HAMBURGER & MOBILE MENU END */

/* --------------------------------------------------------------------------
   Horizontal Scroll Carousel Utilities (Mobile & Tablet)
   Standardized Mobile Carousel Gutter Alignment & Anti-Clipping Engine
   -------------------------------------------------------------------------- */
.scroll-snap-x,
[id$="-swipe-track"],
[id$="-track"],
#modules-track,
#msc-reviews-grid,
#category-pills,
#home-blog-categories,
#blog-cat-pills {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem !important; /* matches px-4 (16px) page gutter */
  scroll-padding-right: 1rem !important;
  scroll-padding-inline: 1rem !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}

@media (min-width: 640px) {
  .scroll-snap-x,
  [id$="-swipe-track"],
  [id$="-track"],
  #modules-track,
  #msc-reviews-grid,
  #category-pills,
  #home-blog-categories,
  #blog-cat-pills {
    scroll-padding-left: 1.5rem !important; /* matches sm:px-6 (24px) */
    scroll-padding-right: 1.5rem !important;
    scroll-padding-inline: 1.5rem !important;
  }
}

/* Desktop Grid Reset (Prevents Snapping Conflicts in Grid Mode) */
@media (min-width: 768px) {
  .md\:grid,
  #home-blog-feed,
  #modules-track,
  #msc-reviews-grid {
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
    scroll-padding-inline: 0 !important;
    scroll-snap-type: none !important;
  }
}

@media (min-width: 1024px) {
  .lg\:grid,
  #ecosystem-swipe-track,
  #toolkits-swipe-track,
  #testimonials-swipe-track,
  #capabilities-track {
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
    scroll-padding-inline: 0 !important;
    scroll-snap-type: none !important;
  }
}

/* Snap Alignment: Start Alignment on Mobile (Fixes Harsh Screen Edge Flush / Center Misalignment) */
.scroll-snap-start,
.scroll-snap-center,
[id$="-swipe-track"] > div,
[id$="-track"] > div,
#modules-track > div,
#msc-reviews-grid > div {
  scroll-snap-align: start !important;
  scroll-snap-stop: normal;
}

@media (min-width: 768px) {
  .md\:grid > *,
  #home-blog-feed > *,
  #modules-track > *,
  #msc-reviews-grid > * {
    scroll-snap-align: none !important;
  }
}

@media (min-width: 1024px) {
  .lg\:grid > *,
  #ecosystem-swipe-track > *,
  #toolkits-swipe-track > *,
  #testimonials-swipe-track > *,
  #capabilities-track > * {
    scroll-snap-align: none !important;
  }
}

/* Trailing Breathing Room (Prevents Last Card Harsh Screen Edge Clipping) */
@media (max-width: 767px) {
  .scroll-snap-x > :last-child,
  [id$="-swipe-track"] > :last-child,
  #modules-track > :last-child,
  #msc-reviews-grid > :last-child,
  #category-pills > :last-child,
  #home-blog-categories > :last-child,
  #blog-cat-pills > :last-child,
  #home-blog-feed > :last-child {
    margin-right: 1.25rem !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .scroll-snap-x > :last-child,
  [id$="-swipe-track"] > :last-child,
  #modules-track > :last-child,
  #msc-reviews-grid > :last-child,
  #category-pills > :last-child,
  #home-blog-categories > :last-child,
  #blog-cat-pills > :last-child,
  #home-blog-feed > :last-child {
    margin-right: 1.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #demos-swipe-track > :last-child,
  #faq-swipe-track > :last-child,
  #ecosystem-swipe-track > :last-child,
  #toolkits-swipe-track > :last-child,
  #testimonials-swipe-track > :last-child,
  #audience-track > :last-child,
  #standards-track > :last-child,
  #capabilities-track > :last-child {
    margin-right: 1.5rem !important;
  }
}

/* Global Ultra-Luxury Swipe Cards (Floating, Spring-Lifted, Tactile Touch, Anti-Clipping) */
.scroll-snap-x,
[id$="-swipe-track"],
#dfy-questions-track {
  -webkit-tap-highlight-color: transparent;
  padding-top: 6px !important;
  margin-top: -6px !important;
  padding-bottom: 20px !important;
  margin-bottom: -20px !important;
}

.scroll-snap-center,
.dfy-question-card,
[id$="-swipe-track"] > div {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
  will-change: transform;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-snap-center:hover,
  .dfy-question-card:hover,
  [id$="-swipe-track"] > div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 34px -6px rgba(42, 36, 33, 0.09), 0 4px 14px -2px rgba(196, 115, 83, 0.07) !important;
    border-color: rgba(196, 115, 83, 0.45) !important;
  }
}

/* Touch & Click active state: preserve 100% border clarity with inset glow, no scale shift that clips borders */
.scroll-snap-center:active,
.dfy-question-card:active,
[id$="-swipe-track"] > div:active {
  transform: none !important;
  border-color: rgba(196, 115, 83, 0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(196, 115, 83, 0.35), 0 4px 14px -2px rgba(196, 115, 83, 0.1) !important;
  transition-duration: 0.1s !important;
}

/* Demos track cards: strictly disable wrapper hover lift, border-color shifts, and box-shadows (hover scoped only to image) */
#demos-swipe-track > div,
#demos-swipe-track > div:hover,
#demos-swipe-track > div:active {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
}

.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* --------------------------------------------------------------------------
   Hero Featured Product Live Animations (Luxury Boutique Attention)
   -------------------------------------------------------------------------- */
.hero-glow-ambient {
  animation: heroGlowBreathing 6s ease-in-out infinite alternate;
  will-change: transform, opacity;
  filter: blur(20px);
}
@keyframes heroGlowBreathing {
  0% {
    transform: scale(0.96) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.04) translate(3px, -3px);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.98) translate(-3px, 2px);
    opacity: 0.7;
  }
}

.hero-featured-float {
  animation: heroCardFloat 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroCardFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.btn-shimmer-live {
  position: relative;
  overflow: hidden;
}
.btn-shimmer-live::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: rotate(25deg) translateX(-250%);
  animation: btnSweepGleam 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes btnSweepGleam {
  0%, 20% {
    transform: rotate(25deg) translateX(-250%);
  }
  45%, 100% {
    transform: rotate(25deg) translateX(450%);
  }
}

.badge-gleam-live {
  position: relative;
  overflow: hidden;
}
.badge-gleam-live::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  transform: translateX(-150%);
  animation: badgeSweep 5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes badgeSweep {
  0%, 30% {
    transform: translateX(-150%);
  }
  60%, 100% {
    transform: translateX(180%);
  }
}

.sparkle-spin {
  display: inline-block;
  animation: sparkleSpin 4s ease-in-out infinite;
}
@keyframes sparkleSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.18); }
  75% { transform: rotate(12deg) scale(1.18); }
}

.star-twinkle:hover svg,
.star-twinkle svg {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.star-twinkle:hover svg:nth-child(1) { animation: starPulse 1s ease infinite 0.1s; }
.star-twinkle:hover svg:nth-child(2) { animation: starPulse 1s ease infinite 0.2s; }
.star-twinkle:hover svg:nth-child(3) { animation: starPulse 1s ease infinite 0.3s; }
.star-twinkle:hover svg:nth-child(4) { animation: starPulse 1s ease infinite 0.4s; }
.star-twinkle:hover svg:nth-child(5) { animation: starPulse 1s ease infinite 0.5s; }

@keyframes starPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); }
  50% { transform: scale(1.25); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8)); }
}

.icon-zap-pulse {
  animation: zapBreathing 3s ease-in-out infinite;
}
@keyframes zapBreathing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.22);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(196, 115, 83, 0.7));
  }
}

/* --------------------------------------------------------------------------
   Maternal Support Co. - Luxury Split Curtain Preloader & Hero 3D Reveal
   -------------------------------------------------------------------------- */
html.msc-intro-skip #msc-preloader {
  display: none !important;
}

#msc-preloader {
  contain: strict;
  touch-action: none;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.preloader-panel-top,
.preloader-panel-bottom {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  max-width: 100vw;
  overflow: hidden;
}

.preloader-glow {
  background: radial-gradient(circle, rgba(226, 109, 80, 0.28) 0%, rgba(168, 72, 49, 0.16) 45%, rgba(29, 24, 21, 0) 70%);
  animation: mscGlowBreathe 3.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes mscGlowBreathe {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.65;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 1;
  }
}

.botanical-path {
  will-change: stroke-dashoffset;
  transition: stroke-dashoffset 0.05s linear;
}

/* Fail-Safe Headline & Word Masks: Guaranteed 100% visible, zero clipping */
.hero-word-mask {
  display: inline;
  vertical-align: baseline;
}

.hero-word-inner {
  display: inline;
}

.hero-anim-title {
  will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   Smart & Precise Mobile Typography, Hierarchy & Spacing System
   Prevents blown-up fonts and cramped viewports across all major site pages
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Headline scaling: balanced, editorial 30px on mobile screens */
  h1.font-serif.text-4xl,
  h1.font-serif.text-5xl,
  h1.font-serif.text-6xl,
  h1.text-4xl,
  h1.text-5xl,
  h1.text-6xl,
  h1.font-serif {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  /* Subheadings on mobile */
  h2.font-serif.text-3xl,
  h2.font-serif.text-4xl,
  h2.font-serif.text-5xl,
  h2.text-3xl,
  h2.text-4xl {
    font-size: 1.45rem !important; /* 23.2px */
    line-height: 1.28 !important;
  }

  /* Uniform header container height on mobile across ALL pages */
  header.glass-nav .max-w-7xl,
  header .max-w-7xl {
    height: 4rem !important; /* 64px = h-16 */
  }

  /* Refined badges: legible 12px without awkward 2-line wraps */
  .hero-anim-badge,
  .inline-flex.rounded-full.text-xs {
    font-size: 0.75rem !important; /* 12px */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* Comfortable section padding across heroes */
  main > section:first-of-type {
    padding-top: 1.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* Vertical space-y stacks on mobile */
  .space-y-4 > :not([hidden]) ~ :not([hidden]),
  .space-y-5 > :not([hidden]) ~ :not([hidden]),
  .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.95rem !important;
  }

  /* Tactile primary CTAs on mobile (minimum 44px tap target height) */
  .hero-anim-cta,
  a.btn-terracotta.text-sm,
  a.btn-terracotta.text-base,
  button.btn-terracotta {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important; /* 14px */
    min-height: 44px !important;
  }

  /* Body copy on mobile: comfortable, readable 15px */
  p.text-sm.sm\:text-base,
  p.text-base.sm\:text-lg,
  p.text-xs.sm\:text-base,
  p.text-xs.sm\:text-sm,
  .hero-anim-p,
  section p.leading-relaxed {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.62 !important;
  }

  /* Section divider compact margins */
  .section-divider {
    margin-top: 0.65rem !important;
    margin-bottom: 0.65rem !important;
  }
}

/* --------------------------------------------------------------------------
   Hero Card Dual-Offer Auto-Swap Engine (Zero Layout Shift Stack)
   -------------------------------------------------------------------------- */
.hero-grid-stack {
  display: grid;
  grid-template-columns: 100%;
  position: relative;
  align-items: start;
}
.hero-swap-slide {
  grid-area: 1 / 1;
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.42s ease;
  will-change: transform, opacity, filter;
}
.hero-swap-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0px);
  pointer-events: auto;
  z-index: 2;
  visibility: visible;
}
.hero-swap-slide.is-hidden {
  opacity: 0;
  transform: translateX(16px) scale(0.985);
  filter: blur(3px);
  pointer-events: none;
  z-index: 1;
  visibility: hidden;
}

/* Segmented Dual-Offer Tabs */
.hero-seg-tab {
  border: 1px solid transparent;
  background: transparent;
  opacity: 0.78;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-seg-tab:hover:not(.is-active) {
  opacity: 1;
  background: rgba(255, 255, 255, 0.55);
}
.hero-seg-tab.is-active {
  opacity: 1;
  background: #FFFFFF;
  border-color: #E2D8C7;
  box-shadow: 0 2px 10px rgba(42, 36, 33, 0.06);
}

/* ==========================================================================
   PREMIUM PRODUCT CARD REDESIGN SYSTEM (Editorial Quiet-Luxury)
   Matches Reference: media_1792226641238_7a2b50d2.jpg
   ========================================================================== */

/* Base Premium Card Container */
.product-card-premium {
  --card-bg: #FCFBF9;
  --card-border: #EAE3D9;
  --card-shadow: 0 20px 50px rgba(42, 36, 33, 0.06);
  --card-text-primary: #2A2421;
  --card-text-secondary: #5C544F;
  --card-text-muted: #8E847E;
  --card-divider: #F0EAE1;
  
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 28px;
}

@media (min-width: 640px) {
  .product-card-premium {
    border-radius: 32px;
  }
}

/* Theme: Sage Green (Quick-Start / Intake) */
.card-theme-sage {
  --theme-primary: #3E5645;
  --theme-primary-hover: #314637;
  --theme-secondary: #4F6A5B;
  --theme-tint-bg: #EEF4F0;
  --theme-tint-border: #DEE9E1;
  --theme-panel-bg: #F5F8F6;
  --theme-panel-border: #DEE7E1;
  --theme-badge-bg: #3E5645;
  --theme-badge-text: #FFFFFF;
  --theme-discount-bg: #E2EDE5;
  --theme-discount-text: #2D5A3C;
  --theme-discount-border: #CDE0D3;
  --theme-pill-bg: #FAF3EE;
  --theme-pill-text: #2A2421;
  --theme-pill-border: #F5DDD2;
  --theme-icon-circle-bg: #D6E5D9;
  --theme-icon-circle-text: #2D5A3C;
  --theme-progress-bar: #3E5645;
  --theme-active-ring: #C47353;
  --theme-link: #C47353;
}

/* Theme: Terracotta / Warm Clay (Full System / Complete Packet) */
.card-theme-terracotta {
  --theme-primary: #C47353;
  --theme-primary-hover: #A85A3C;
  --theme-secondary: #E8956A;
  --theme-tint-bg: #FAF3EE;
  --theme-tint-border: #F5DDD2;
  --theme-panel-bg: #FAF7F2;
  --theme-panel-border: #EFEAE2;
  --theme-badge-bg: #2A2421;
  --theme-badge-text: #FAF6F0;
  --theme-discount-bg: #FAF3F0;
  --theme-discount-text: #A25335;
  --theme-discount-border: #FCDCCE;
  --theme-pill-bg: #FAF3EE;
  --theme-pill-text: #2A2421;
  --theme-pill-border: #F5DDD2;
  --theme-icon-circle-bg: #F5E0D5;
  --theme-icon-circle-text: #A25335;
  --theme-progress-bar: #C47353;
  --theme-active-ring: #C47353;
  --theme-link: #C47353;
}

/* Theme: Dusty Rose / Plum (Configurable) */
.card-theme-rose {
  --theme-primary: #A65B6F;
  --theme-primary-hover: #8D4759;
  --theme-secondary: #C47D8F;
  --theme-tint-bg: #FAF1F3;
  --theme-tint-border: #F2DCE2;
  --theme-panel-bg: #FAF4F5;
  --theme-panel-border: #EFE2E5;
  --theme-badge-bg: #A65B6F;
  --theme-badge-text: #FFFFFF;
  --theme-discount-bg: #F6E4E9;
  --theme-discount-text: #8D4759;
  --theme-discount-border: #E8C5CE;
  --theme-pill-bg: #FAF1F3;
  --theme-pill-text: #2A2421;
  --theme-pill-border: #F2DCE2;
  --theme-icon-circle-bg: #F2D4DC;
  --theme-icon-circle-text: #8D4759;
  --theme-progress-bar: #A65B6F;
  --theme-active-ring: #A65B6F;
  --theme-link: #A65B6F;
}

/* Tier Selector Segmented Bar */
.hero-tier-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.32rem;
  border-radius: 1.25rem;
  background: #F7F3ED;
  border: 1px solid #EAE0D2;
  gap: 0.25rem;
  overflow: hidden;
}
.hero-tier-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.42rem;
  border-radius: 0.875rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  user-select: none;
}
.hero-tier-option:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.5);
}
.hero-tier-option.is-selected {
  background: #FFFFFF;
  border-color: #E2D8C7;
  box-shadow: 0 2px 8px rgba(42, 36, 33, 0.05);
}
.hero-tier-price-pill {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 0.75rem;
  background: #FAF3EE;
  color: #2A2421;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #F5DDD2;
  box-shadow: 0 1px 3px rgba(42, 36, 33, 0.03);
}
@media (min-width: 640px) {
  .hero-tier-bar {
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
  }
  .hero-tier-option {
    gap: 0.625rem;
    padding: 0.45rem 0.75rem;
  }
  .hero-tier-price-pill {
    font-size: 1.35rem;
    padding: 0.6rem 1.15rem;
    border-radius: 0.875rem;
  }
}

/* Price Pop Micro-Bounce */
.price-pop {
  animation: heroPricePop 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heroPricePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Collapsible 7-Day Guarantee & Refund Accordion Dropdown
   -------------------------------------------------------------------------- */
.refund-dropdown-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.refund-dropdown-body.open {
  max-height: 185px;
  opacity: 1;
  border-width: 1px;
  border-color: #EFE9DF;
  margin-top: 0.5rem;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #C47353 transparent;
}
@media (min-width: 640px) {
  .refund-dropdown-body.open {
    max-height: 240px;
  }
}
.refund-dropdown-body::-webkit-scrollbar {
  width: 4px;
}
.refund-dropdown-body::-webkit-scrollbar-track {
  background: transparent;
}
.refund-dropdown-body::-webkit-scrollbar-thumb {
  background-color: #D6C7BC;
  border-radius: 9999px;
}
.refund-dropdown-body::-webkit-scrollbar-thumb:hover {
  background-color: #C47353;
}
#cart-footer::-webkit-scrollbar {
  width: 4px;
}
#cart-footer::-webkit-scrollbar-track {
  background: transparent;
}
#cart-footer::-webkit-scrollbar-thumb {
  background-color: #E2D9D0;
  border-radius: 9999px;
}
.refund-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.refund-chevron.open {
  transform: rotate(180deg);
  color: #C47353 !important;
}

/* --------------------------------------------------------------------------
   Strict One-Line Buttons Rule (No double line wrapping)
   -------------------------------------------------------------------------- */
/* Exclude accordions, FAQ questions, disclosures, and card toggles */
button:not([onclick*="toggle"]):not([class*="faq"]):not([class*="accordion"]):not([class*="disclosure"]):not(.text-left),
.btn:not([class*="faq"]):not([class*="accordion"]),
[role="button"]:not([class*="faq"]):not([class*="accordion"]),
.btn-shimmer,
a.btn {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

/* Enforce fluid wrapping for FAQ and Accordion buttons */
button[onclick*="toggle"],
.medicaid-faq-card button,
.faq-item summary {
  white-space: normal !important;
  text-wrap: wrap !important;
}

/* --------------------------------------------------------------------------
   Magic UI & UI/UX Pro Max Spotlight Components
   -------------------------------------------------------------------------- */
/* Magic UI Animated Shiny Text Sweep */
@keyframes magicShinySweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.magic-shiny-text {
  color: #A25335;
  background: linear-gradient(
    110deg,
    #A25335 0%,
    #A25335 38%,
    #FFFFFF 50%,
    #A25335 62%,
    #A25335 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: magicShinySweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Magic UI Conic Border Beam */
.magic-border-beam-container {
  position: relative;
  isolation: isolate;
}
.magic-border-beam {
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
}
.magic-border-beam::after {
  content: '';
  position: absolute;
  aspect-square: 1;
  width: 220px;
  background: linear-gradient(to right, #C47353, #F5D3C4, transparent);
  offset-path: rect(0 auto auto 0 round 24px);
  animation: magicBeamMove 9s linear infinite;
}
@keyframes magicBeamMove {
  100% {
    offset-distance: 100%;
  }
}
@supports not (offset-path: rect(0 auto auto 0)) {
  .magic-border-beam::after {
    display: none;
  }
  .magic-border-beam {
    border: 1.5px solid rgba(196, 115, 83, 0.35);
  }
}

/* Magic UI Subtle Dot Matrix Pattern */
.magic-dot-pattern {
  background-image: radial-gradient(rgba(196, 115, 83, 0.18) 1.25px, transparent 1.25px);
  background-size: 24px 24px;
}
.magic-dot-mask {
  mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 30%, transparent 95%);
}

/* Tactile Hover Glow for Primary CTA */
.btn-terracotta-glow {
  box-shadow: 0 4px 18px -2px rgba(196, 115, 83, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-terracotta-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px -2px rgba(196, 115, 83, 0.5);
}
.btn-terracotta-glow:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(196, 115, 83, 0.4);
}

/* --------------------------------------------------------------------------
   Aceternity UI Spotlight Card
   -------------------------------------------------------------------------- */
.spotlight-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.spotlight-card:hover {
  border-color: rgba(196, 115, 83, 0.4);
  box-shadow: 0 20px 40px -15px rgba(196, 115, 83, 0.12);
}
.spotlight-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(196, 115, 83, 0.08), transparent 40%);
}
.spotlight-card:hover .spotlight-layer {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Reduced Motion Accessibility & Power Efficiency
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .magic-shiny-text {
    animation: none !important;
    -webkit-text-fill-color: #A25335 !important;
    color: #A25335 !important;
  }
  .magic-border-beam::after {
    animation: none !important;
    display: none !important;
  }
}
/* ==========================================================================
   LUXURY WARM MOCHA ATMOSPHERE GRADIENTS (Screenshot Matched)
   ========================================================================== */
.luxury-dark-gradient,
footer.bg-\[\#2A2421\],
footer[class*="bg-[#2A2421]"],
section.bg-\[\#2A2421\],
section[class*="bg-[#2A2421]"],
#dfy-doula-website-spotlight.bg-\[\#2A2421\] {
  position: relative !important;
  background-color: #1A1412 !important;
  background-image: 
    radial-gradient(ellipse 85% 75% at 50% 12%, rgba(196, 115, 83, 0.28) 0%, rgba(196, 115, 83, 0.08) 55%, transparent 80%),
    linear-gradient(180deg, #1E1613 0%, #17110F 50%, #120D0C 100%) !important;
}

/* Tablet & Mobile responsive optimization */
@media (max-width: 1024px) {
  .luxury-dark-gradient,
  footer.bg-\[\#2A2421\],
  footer[class*="bg-[#2A2421]"],
  section.bg-\[\#2A2421\],
  section[class*="bg-[#2A2421]"],
  #dfy-doula-website-spotlight.bg-\[\#2A2421\] {
    background-image: 
      radial-gradient(ellipse 100% 65% at 50% 8%, rgba(196, 115, 83, 0.30) 0%, rgba(196, 115, 83, 0.08) 50%, transparent 75%),
      linear-gradient(180deg, #1E1613 0%, #17110F 50%, #120D0C 100%) !important;
  }
}

@media (max-width: 640px) {
  .luxury-dark-gradient,
  footer.bg-\[\#2A2421\],
  footer[class*="bg-[#2A2421]"],
  section.bg-\[\#2A2421\],
  section[class*="bg-[#2A2421]"],
  #dfy-doula-website-spotlight.bg-\[\#2A2421\] {
    background-image: 
      radial-gradient(circle 320px at 50% 50px, rgba(196, 115, 83, 0.35) 0%, rgba(196, 115, 83, 0.10) 45%, transparent 80%),
      linear-gradient(180deg, #1E1613 0%, #17110F 40%, #120D0C 100%) !important;
  }
}

/* Elevated glass cards inside dark sections */
section.bg-\[\#2A2421\] .magnetic-card,
section[class*="bg-[#2A2421]"] .magnetic-card,
footer.bg-\[\#2A2421\] .magnetic-card {
  background: rgba(38, 30, 26, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   WARM LIGHT BROWN & SAGE ORGANIC GRADIENT (Screenshot Matched)
   ========================================================================== */
.light-brown-sage-gradient,
#dfy-doula-website-spotlight:not(.luxury-dark-gradient) {
  position: relative !important;
  background-color: #FAF4ED !important;
  background-image: 
    radial-gradient(ellipse 65% 55% at 8% 18%, rgba(217, 142, 110, 0.16) 0%, rgba(250, 244, 237, 0) 70%),
    radial-gradient(ellipse 60% 50% at 92% 22%, rgba(110, 136, 121, 0.18) 0%, rgba(250, 244, 237, 0) 65%),
    radial-gradient(ellipse 70% 60% at 15% 85%, rgba(110, 136, 121, 0.15) 0%, rgba(250, 244, 237, 0) 70%),
    radial-gradient(ellipse 65% 55% at 85% 82%, rgba(196, 115, 83, 0.14) 0%, rgba(250, 244, 237, 0) 65%),
    linear-gradient(180deg, #FDFBF7 0%, #FAF3EB 50%, #F5ECE1 100%) !important;
}

/* Subtle glowing accent for cards inside this section */
#dfy-doula-website-spotlight .bg-white {
  box-shadow: 0 10px 30px -5px rgba(42, 36, 33, 0.05), 0 0 0 1px rgba(234, 227, 217, 0.7) !important;
}

/* ==========================================================================
   CONTINUOUS HORIZONTAL FLOATING MARQUEE (Desktop & Mobile)
   ========================================================================== */
@keyframes infiniteFloatScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.float-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0 16px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.float-marquee-track {
  display: flex !important;
  width: max-content !important;
  gap: 20px !important;
  animation: infiniteFloatScroll 35s linear infinite !important;
  will-change: transform;
}

.float-marquee-track:hover {
  animation-play-state: paused !important;
}

.float-marquee-card {
  width: 320px !important;
  max-width: 85vw !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #EAE1D3 !important;
  border-radius: 1.25rem !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: 0 4px 20px -2px rgba(42, 36, 33, 0.05) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.float-marquee-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px -4px rgba(42, 36, 33, 0.12) !important;
  border-color: rgba(196, 115, 83, 0.5) !important;
}

/* ==========================================================================
   DAISYUI GLASSMORPHIC LUXE CARDS & FEATURE BOXES (Option 2)
   High-craft frosted glassmorphic cards with inner specular lighting,
   tactile lift, subtle glowing border accents, and luminous badges.
   ========================================================================== */
.card-glass-luxe,
.card-warm-luxury {
  position: relative !important;
  background: radial-gradient(circle at top right, rgba(247, 239, 233, 0.82) 0%, rgba(255, 255, 255, 0.96) 60%), #FFFFFF !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(232, 217, 197, 0.88) !important;
  border-radius: 1.5rem !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), 0 10px 30px -8px rgba(183, 110, 88, 0.08) !important;
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.card-glass-luxe::before,
.card-warm-luxury::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(183, 110, 88, 0.35) 30%, rgba(183, 110, 88, 0.8) 50%, rgba(183, 110, 88, 0.35) 70%, transparent 100%) !important;
  opacity: 0.55 !important;
  transition: opacity 0.35s ease, height 0.35s ease !important;
  z-index: 10 !important;
}

.card-glass-luxe:hover,
.card-warm-luxury:hover {
  transform: translateY(-6px) scale(1.008) !important;
  border-color: rgba(183, 110, 88, 0.55) !important;
  box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 1), 0 24px 45px -12px rgba(183, 110, 88, 0.18), 0 0 0 1px rgba(183, 110, 88, 0.2) !important;
}

.card-glass-luxe:hover::before,
.card-warm-luxury:hover::before {
  opacity: 1 !important;
  height: 4px !important;
}

/* Glass & Sculpted Icon Badges */
.sculpted-icon,
.card-glass-luxe .glass-icon-wrapper,
.card-warm-luxury .glass-icon-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(232, 217, 197, 0.85) !important;
  box-shadow: 0 2px 8px rgba(183, 110, 88, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.group:hover .sculpted-icon,
.card-glass-luxe:hover .sculpted-icon,
.card-warm-luxury:hover .sculpted-icon,
.group:hover .glass-icon-wrapper,
.card-glass-luxe:hover .glass-icon-wrapper,
.card-warm-luxury:hover .glass-icon-wrapper {
  transform: scale(1.08) rotate(-1.5deg) !important;
  border-color: rgba(183, 110, 88, 0.55) !important;
  box-shadow: 0 6px 16px rgba(183, 110, 88, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* DaisyUI Glass Luxe Badges */
.badge-luxe-primary,
.badge-glass-luxe {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #965542;
  background: rgba(250, 243, 238, 0.85);
  border: 1px solid rgba(183, 110, 88, 0.35);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.badge-luxe-secondary,
.badge-glass-luxe-sage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4F6A5B;
  background: rgba(235, 241, 237, 0.85);
  border: 1px solid rgba(110, 136, 121, 0.35);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Magnetic Circle Arrow Pill for Card CTAs */
.btn-arrow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: #FAF3EE;
  border: 1px solid #E8D9C5;
  color: #B76E58;
  transition: all 0.3s ease;
}

.group:hover .btn-arrow-pill,
.card-glass-luxe:hover .btn-arrow-pill,
.card-warm-luxury:hover .btn-arrow-pill {
  background-color: #B76E58 !important;
  color: #FFFFFF !important;
  transform: translateX(4px) !important;
}