/* PRODUCTION-READY Claude Design System - Properly Fixed */

/* ============================================
   COLOR VARIABLES - Claude Official Palette
   ============================================ */
:root {
  --claude-crail: #C15F3C;
  --claude-crail-dark: #9D4D30;
  --claude-crail-light: #D17A5C;
  --claude-pampas: #F4F3EE;
  --claude-white: #FFFFFF;
  --claude-text-primary: #2B2A27;
  --claude-text-secondary: #5A5853;
  --claude-text-tertiary: #8B8780;
  --claude-border: #E3E2DD;
  --claude-border-light: #EEEDEA;
}

/* ============================================
   RESET - CLEAN BACKGROUNDS (EXCLUDING STATS BAR)
   ============================================ */

* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Apply Pampas to body and main ONLY - let sections control their own backgrounds */
body,
main {
  background-color: #F4F3EE !important;
  background-image: none !important;
}

/* Default section background - Pampas */
section {
  background-color: #F4F3EE !important;
  background-image: none !important;
}

/* WHITE sections - testimonials, pricing, FAQ */
section[style*="rgba(232,107,63,0.05)"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

section#pricing {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

section:has(h2):has(.space-y-3) {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* ============================================
   NAVBAR - VISIBLE WITH WHITE BACKGROUND
   ============================================ */

nav.fixed {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(193, 95, 60, 0.08) !important;
}

nav .bg-gradient-to-br {
  background: linear-gradient(135deg, #C15F3C 0%, #9D4D30 100%) !important;
}

nav .text-charcoal,
nav .dark\:text-white {
  color: #2B2A27 !important;
  font-weight: 700 !important;
}

/* Nav Download button - solid Crail background */
nav a.rounded-full[style*="background-color:var(--primary)"] {
  background: linear-gradient(135deg, #C15F3C 0%, #9D4D30 100%) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(193, 95, 60, 0.3) !important;
  border: none !important;
}

nav a.rounded-full[style*="background-color:var(--primary)"]:hover {
  background: linear-gradient(135deg, #D17A5C 0%, #C15F3C 100%) !important;
  box-shadow: 0 4px 12px rgba(193, 95, 60, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Kill decorative blur elements */
.absolute.inset-0 > div[class*="blur"],
[class*="blur-3xl"]:not([class*="shadow"]),
.absolute.inset-0 > .absolute[class*="blur"] {
  display: none !important;
}

/* Remove decorative icons (stars, lightning) in hero */
section.relative.min-h-\[70vh\] > .absolute:has(svg),
section.relative.min-h-screen > .absolute:has(svg) {
  display: none !important;
}

/* Tone down hero background blobs */
section.relative.min-h-\[70vh\] > .absolute.inset-0 > div[class*="blur-3xl"],
section.relative.min-h-screen > .absolute.inset-0 > div[class*="blur-3xl"] {
  opacity: 0.4 !important;
}

/* ============================================
   HERO SECTION - OPTIMIZED
   ============================================ */

section.relative.min-h-\[70vh\],
section.relative.min-h-screen {
  background: #F4F3EE !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  min-height: auto !important;
}

/* Smaller phone image in hero */
.relative.w-full.max-w-\[320px\],
.relative.w-full.max-w-\[360px\] {
  max-width: 260px !important;
}

@media (min-width: 768px) {
  .relative.w-full.max-w-\[320px\].md\:max-w-\[360px\],
  .md\:max-w-\[360px\] {
    max-width: 300px !important;
  }
}

h1.font-heading {
  font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 16px !important;
  font-weight: 800 !important;
  color: #2B2A27 !important;
}

[style*="background:linear-gradient(to right, var(--chart-2), var(--primary))"],
span[style*="background:linear-gradient"] {
  background: linear-gradient(120deg, #C15F3C 0%, #9D4D30 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

section.relative.min-h-\[70vh\] > div > div > div > p,
section.relative.min-h-screen p.text-lg {
  color: #5A5853 !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
}

/* Hero button - SOLID Crail gradient */
section.relative button.bg-gradient-to-r,
section.relative.min-h-\[70vh\] button,
section:first-of-type button {
  background: linear-gradient(135deg, #C15F3C 0%, #9D4D30 100%) !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(193, 95, 60, 0.35) !important;
  border: none !important;
  letter-spacing: -0.01em !important;
  color: white !important;
}

section.relative button:hover,
section:first-of-type button:hover {
  background: linear-gradient(135deg, #D17A5C 0%, #C15F3C 100%) !important;
  box-shadow: 0 8px 28px rgba(193, 95, 60, 0.45) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.relative.rounded-\[2\.5rem\] {
  background: linear-gradient(145deg, #FAFAF8 0%, #FFFFFF 100%) !important;
  box-shadow:
    0 20px 60px rgba(43, 42, 39, 0.15),
    0 8px 20px rgba(43, 42, 39, 0.08) !important;
}

[style*="border-color:rgba(255, 255, 255, 0.1)"] {
  border-color: #E3E2DD !important;
  border-width: 3px !important;
}

/* ============================================
   FEATURE CARDS - INCREASED VISIBILITY
   ============================================ */

/* Top 3 feature cards section - PURE WHITE background */
section.py-16.md\:py-24:nth-of-type(2),
section[style*="background-color:var(--card)"].py-16 {
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 0 #EEEDEA !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Top 3 feature cards - PURE WHITE with STRONG shadows */
.jsx-83037452c623c470[style*="background-color:var(--background)"],
div.jsx-83037452c623c470.h-full.rounded-2xl {
  background: #FFFFFF !important;
  border: 2px solid #E3E2DD !important;
  box-shadow:
    0 8px 32px rgba(43, 42, 39, 0.12),
    0 3px 12px rgba(43, 42, 39, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.jsx-83037452c623c470[style*="background-color:var(--background)"]:hover {
  box-shadow:
    0 16px 48px rgba(193, 95, 60, 0.18),
    0 6px 24px rgba(43, 42, 39, 0.12) !important;
  transform: translateY(-8px) !important;
  border-color: rgba(193, 95, 60, 0.4) !important;
}

/* Icon backgrounds - INCREASED to 55% with SOLID Crail backgrounds */
[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"].jsx-83037452c623c470,
div.w-14.h-14.rounded-xl[style*="background:linear-gradient"] {
  background: linear-gradient(135deg, rgba(193, 95, 60, 0.55) 0%, rgba(193, 95, 60, 0.45) 100%) !important;
  border: 2px solid rgba(193, 95, 60, 0.5) !important;
  box-shadow: 0 2px 8px rgba(193, 95, 60, 0.25) !important;
}

[style*="background:linear-gradient(to bottom right, var(--primary), var(--chart-1))"] {
  background: linear-gradient(135deg, rgba(193, 95, 60, 0.58) 0%, rgba(193, 95, 60, 0.48) 100%) !important;
  border: 2px solid rgba(193, 95, 60, 0.55) !important;
  box-shadow: 0 2px 8px rgba(193, 95, 60, 0.3) !important;
}

[style*="background:linear-gradient(to bottom right, var(--chart-4), var(--chart-5))"] {
  background: linear-gradient(135deg, rgba(157, 77, 48, 0.52) 0%, rgba(139, 115, 85, 0.42) 100%) !important;
  border: 2px solid rgba(157, 77, 48, 0.5) !important;
  box-shadow: 0 2px 8px rgba(157, 77, 48, 0.25) !important;
}

/* Icon SVGs - strong Crail */
.jsx-83037452c623c470 svg,
div.w-14.h-14 svg {
  color: #C15F3C !important;
  filter: drop-shadow(0 2px 3px rgba(193, 95, 60, 0.35));
}

.jsx-83037452c623c470 h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #2B2A27 !important;
  margin-bottom: 10px !important;
}

.jsx-83037452c623c470 p {
  color: #5A5853 !important;
  line-height: 1.6 !important;
  font-size: 1.05rem !important;
}

/* ============================================
   CHAT DEMO - FIXED AVATAR
   ============================================ */

section.py-16.overflow-hidden {
  background: #F4F3EE !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Bottom 3 feature cards (Fast, High Quality, Easy) */
section.py-16.overflow-hidden .grid.md\:grid-cols-3 > div.rounded-2xl,
section.overflow-hidden div.rounded-2xl.p-6[style*="background-color:var(--card)"] {
  background: #FFFFFF !important;
  border: 1px solid #E3E2DD !important;
  box-shadow:
    0 4px 16px rgba(43, 42, 39, 0.08),
    0 2px 6px rgba(43, 42, 39, 0.04) !important;
  transition: all 0.3s ease !important;
}

section.py-16.overflow-hidden .grid.md\:grid-cols-3 > div.rounded-2xl:hover {
  box-shadow:
    0 8px 28px rgba(193, 95, 60, 0.12),
    0 4px 12px rgba(43, 42, 39, 0.06) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(193, 95, 60, 0.25) !important;
}

section.py-16 .rounded-3xl[style*="background-color:var(--card)"],
.rounded-3xl.shadow-2xl {
  background: #FFFFFF !important;
  border: 1px solid #E3E2DD !important;
  box-shadow:
    0 20px 60px rgba(43, 42, 39, 0.12),
    0 8px 24px rgba(43, 42, 39, 0.08) !important;
}

/* Chat avatar - FORCE Crail gradient */
div.w-10.h-10.rounded-full[style*="background"],
.flex.items-center.gap-2 > div.w-10.h-10.rounded-full,
[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--primary))"] {
  background: linear-gradient(135deg, #C15F3C 0%, #9D4D30 100%) !important;
}

/* Chat bubbles - user messages with Crail gradient and WHITE text */
.rounded-2xl.rounded-tr-sm[style*="background-color:var(--primary)"],
div[style*="background-color:var(--primary)"].rounded-2xl {
  background: linear-gradient(135deg, #C15F3C 0%, #9D4D30 100%) !important;
  box-shadow: 0 2px 8px rgba(193, 95, 60, 0.25) !important;
  color: white !important;
}

/* FORCE white text on ALL chat bubble children */
.rounded-2xl.rounded-tr-sm[style*="background-color:var(--primary)"] *,
.rounded-2xl.rounded-tr-sm[style*="background-color:var(--primary)"] p,
div[style*="background-color:var(--primary)"].rounded-2xl *,
div[style*="background-color:var(--primary)"].rounded-2xl p {
  color: white !important;
}

.rounded-2xl.rounded-tl-sm[style*="background-color:var(--background)"],
div.rounded-2xl[style*="background-color:var(--background)"]:not(.jsx-83037452c623c470) {
  background: #FAFAF8 !important;
  border: 1px solid #EEEDEA !important;
  box-shadow: 0 1px 4px rgba(43, 42, 39, 0.06) !important;
}

/* ============================================
   TESTIMONIALS - PURE WHITE (AGGRESSIVE OVERRIDE)
   ============================================ */

/* Testimonials section - FORCE pure white */
section[style*="rgba(232,107,63,0.05)"],
section.py-16:has(h2:first-child):nth-of-type(4) {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-top: 1px solid #EEEDEA !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

section[style*="rgba(232,107,63,0.05)"] .rounded-2xl,
section.py-16:has(h2:first-child):nth-of-type(4) .rounded-2xl {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 2px solid #E3E2DD !important;
  box-shadow:
    0 8px 32px rgba(43, 42, 39, 0.1),
    0 3px 12px rgba(43, 42, 39, 0.06) !important;
  transition: all 0.3s ease !important;
}

section[style*="rgba(232,107,63,0.05)"] .rounded-2xl:hover {
  box-shadow:
    0 16px 48px rgba(43, 42, 39, 0.12),
    0 6px 16px rgba(43, 42, 39, 0.08) !important;
  transform: translateY(-6px) !important;
}

[style*="color:#E86B3F"],
.text-xl[style*="color:#E86B3F"] {
  color: #C15F3C !important;
  filter: drop-shadow(0 1px 2px rgba(193, 95, 60, 0.2));
}

/* ============================================
   STATS BAR - FIXED PROPERLY
   ============================================ */

/* Stats section - LIGHTER, WARMER Crail gradient */
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] {
  background: linear-gradient(135deg, #D17A5C 0%, #C15F3C 50%, #B35637 100%) !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(193, 95, 60, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"]:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
  z-index: 0;
}

/* FORCE white text on stats bar - all descendants */
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] *,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] div,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] p,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] span,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] h1,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] h2,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] h3 {
  color: white !important;
  background-color: transparent !important;
  background-image: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  position: relative;
  z-index: 1;
}

/* Stats numbers - FORCE visibility */
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] .text-3xl,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] .text-4xl,
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] .md\:text-5xl {
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================
   PRICING SECTION - FIXED BUTTONS
   ============================================ */

section:has(h2:contains("Simple Pricing")),
section.py-16.md\:py-24:last-of-type {
  background: #F4F3EE !important;
  padding-top: 40px !important;
  padding-bottom: 48px !important;
}

h2.text-3xl.md\:text-5xl.font-bold {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 12px !important;
}

/* FREE card - STRONGER shadows */
section#pricing .grid > div:first-child,
div.rounded-2xl.p-8:not([style*="color:white"]) {
  background: #FFFFFF !important;
  border: 2px solid #E3E2DD !important;
  box-shadow:
    0 12px 40px rgba(43, 42, 39, 0.12),
    0 4px 16px rgba(43, 42, 39, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 32px !important;
}

section#pricing .grid > div:first-child:hover {
  box-shadow:
    0 20px 60px rgba(43, 42, 39, 0.16),
    0 8px 24px rgba(43, 42, 39, 0.12) !important;
  transform: translateY(-8px) !important;
  border-color: rgba(193, 95, 60, 0.4) !important;
}

/* PRO card */
[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"],
div.rounded-2xl.p-6.p-8[style*="color:white"] {
  background: linear-gradient(135deg, #C15F3C 0%, #B35637 50%, #A84D31 100%) !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(193, 95, 60, 0.45),
    0 8px 24px rgba(193, 95, 60, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 32px !important;
}

[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"]:hover {
  box-shadow:
    0 28px 80px rgba(193, 95, 60, 0.55),
    0 12px 32px rgba(193, 95, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-12px) scale(1.02) !important;
}

[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"]:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.18) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
  z-index: 1;
}

[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"] > * {
  position: relative;
  z-index: 2;
}

[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"] * {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

div.rounded-2xl h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.02em !important;
}

div.rounded-2xl .text-4xl,
div.rounded-2xl .text-5xl,
div.rounded-2xl .md\:text-5xl {
  font-size: clamp(2.6rem, 5vw, 3.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 22px !important;
}

div.rounded-2xl ul {
  margin-bottom: 26px !important;
}

div.rounded-2xl li {
  padding: 5px 0 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

div.rounded-2xl svg {
  color: #4A7C59 !important;
  filter: drop-shadow(0 1px 2px rgba(74, 124, 89, 0.3));
}

[style*="color:white"] svg {
  color: rgba(255, 255, 255, 0.98) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* PRO card badge - glassmorphism effect (only for PRO card, not nav buttons) */
[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"] [style*="background-color:var(--primary)"][class*="rounded-full"] {
  background: rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: white !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   BUTTONS - AGGRESSIVE FIX FOR FREE CARD
   ============================================ */

button,
button.inline-flex {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
}

/* FREE card button - ULTRA AGGRESSIVE selectors using valid CSS */
section#pricing .grid > div:first-child button,
section#pricing button.border-2,
button[class*="border-2"][class*="border-orange"],
button[class*="text-orange"],
div[style*="background-color:var(--background)"][class*="rounded-2xl"] > button:last-child {
  background: linear-gradient(135deg, #C15F3C 0%, #9D4D30 100%) !important;
  color: white !important;
  border: none !important;
  padding: 12px 26px !important;
  font-size: 1rem !important;
  box-shadow:
    0 4px 16px rgba(193, 95, 60, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

section#pricing .grid > div:first-child button:hover,
section#pricing button.border-2:hover,
button[class*="border-2"]:hover {
  background: linear-gradient(135deg, #D17A5C 0%, #C15F3C 100%) !important;
  box-shadow:
    0 6px 22px rgba(193, 95, 60, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* PRO card button - solid white */
[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"] button {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #9D4D30 !important;
  border: none !important;
  padding: 12px 26px !important;
  font-size: 1rem !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

[style*="background:linear-gradient(to bottom right, var(--chart-2), var(--chart-3))"][style*="color:white"] button:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* ============================================
   DOWNLOAD CTA SECTION - BUTTON TEXT FIXES
   ============================================ */

/* Download CTA section - gradient background */
section#download {
  background: linear-gradient(135deg, #C15F3C 0%, #B35637 50%, #A84D31 100%) !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Download CTA main button - white background with dark Crail text */
section#download > div > div > a:first-of-type,
section#download a[style*="background-color:white"],
section#download .rounded-button[style*="background-color:white"] {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #7D3D20 !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  padding: 16px 38px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  text-shadow: none !important;
  transition: all 0.3s ease !important;
}

section#download > div > div > a:first-of-type:hover,
section#download a[style*="background-color:white"]:hover {
  background: rgba(255, 255, 255, 1) !important;
  color: #5D2D10 !important;
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* App Store and Google Play link buttons - PURE WHITE text */
section#download button.flex.items-center.gap-2,
section#download .flex.items-center.justify-center.gap-4 button {
  color: rgba(255, 255, 255, 1) !important;
  background: transparent !important;
  border: none !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

section#download button.flex.items-center.gap-2:hover,
section#download .flex.items-center.justify-center.gap-4 button:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* FORCE white color on all text inside App Store/Play buttons */
section#download button.flex.items-center.gap-2 *,
section#download button.flex.items-center.gap-2 span,
section#download button.flex.items-center.gap-2 svg,
section#download .flex.items-center.justify-center.gap-4 button *,
section#download .flex.items-center.justify-center.gap-4 button span,
section#download .flex.items-center.justify-center.gap-4 button svg {
  color: rgba(255, 255, 255, 1) !important;
  fill: currentColor !important;
}

/* Download section heading - PURE WHITE */
section#download h2 {
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  font-weight: 900 !important;
}

/* Separator dot between buttons - lighter */
section#download .flex.items-center.justify-center.gap-4 > span {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   FAQ SECTION - VISIBLE CARDS
   ============================================ */

/* FAQ container */
section:has(h2:first-child) .space-y-3 {
  gap: 12px !important;
}

/* FAQ cards - PURE WHITE with STRONGER borders and shadows */
section .space-y-3 > div > button.rounded-xl,
section button.w-full.text-left {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 2px solid #D4D4CE !important;
  box-shadow:
    0 4px 20px rgba(43, 42, 39, 0.1),
    0 2px 8px rgba(43, 42, 39, 0.06) !important;
  transition: all 0.3s ease !important;
  padding: 20px !important;
}

section .space-y-3 > div > button:hover {
  background: #FFFFFF !important;
  border-color: rgba(193, 95, 60, 0.45) !important;
  box-shadow:
    0 8px 32px rgba(193, 95, 60, 0.15),
    0 4px 12px rgba(43, 42, 39, 0.08) !important;
  transform: translateY(-3px) !important;
}

/* FAQ arrow icons */
section button svg {
  color: #C15F3C !important;
  transition: transform 0.3s ease !important;
}

section button:hover svg {
  transform: scale(1.1) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4 {
  color: #2B2A27 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  margin-bottom: 12px !important;
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
  margin-bottom: 10px !important;
}

p {
  color: #5A5853 !important;
  line-height: 1.65 !important;
  font-size: 1.05rem !important;
}

[style*="color:var(--muted-foreground)"] {
  color: #5A5853 !important;
}

/* ============================================
   SHADOWS
   ============================================ */

.shadow-lg {
  box-shadow:
    0 4px 16px rgba(43, 42, 39, 0.1),
    0 2px 6px rgba(43, 42, 39, 0.06) !important;
}

.shadow-xl {
  box-shadow:
    0 8px 32px rgba(43, 42, 39, 0.12),
    0 4px 12px rgba(43, 42, 39, 0.08) !important;
}

.shadow-2xl {
  box-shadow:
    0 16px 48px rgba(43, 42, 39, 0.15),
    0 8px 20px rgba(43, 42, 39, 0.1) !important;
}

/* ============================================
   SPACING - TIGHTENED
   ============================================ */

section.py-16 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

section.md\:py-24 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

section.py-20 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

section.md\:py-32 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.container {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Tighten section headers */
.text-center.mb-12 {
  margin-bottom: 32px !important;
}

/* Tighten hero badge */
.mb-6:has(.rounded-full) {
  margin-bottom: 16px !important;
}

/* Tighten hero heading */
h1.mb-6 {
  margin-bottom: 16px !important;
}

/* Tighten hero paragraph spacing */
p.mb-8 {
  margin-bottom: 24px !important;
}

p.mb-4 {
  margin-bottom: 12px !important;
}

/* Tighten feature card padding */
.rounded-2xl.p-8 {
  padding: 24px !important;
}

/* Tighten feature card icon margin */
.rounded-xl.mb-6 {
  margin-bottom: 16px !important;
}

/* Tighten grid gaps */
.gap-12 {
  gap: 24px !important;
}

.lg\:gap-20 {
  gap: 32px !important;
}

/* Hero grid - tighter gap between text and phone */
section.relative.min-h-\[70vh\] .grid.lg\:grid-cols-2,
section.relative.min-h-screen .grid.lg\:grid-cols-2 {
  gap: 20px !important;
}

@media (min-width: 1024px) {
  section.relative.min-h-\[70vh\] .grid.lg\:grid-cols-2,
  section.relative.min-h-screen .grid.lg\:grid-cols-2 {
    gap: 40px !important;
  }
}

/* Tighten chat demo padding */
.p-8.md\:p-12 {
  padding: 24px !important;
}

@media (min-width: 768px) {
  .p-8.md\:p-12 {
    padding: 32px !important;
  }
}

/* Tighten comparison table spacing */
.mt-10 {
  margin-top: 32px !important;
}

/* Tighten pricing section header */
.mb-3 {
  margin-bottom: 8px !important;
}

/* Tighten stats section */
section[style*="background: linear-gradient(to right, var(--primary), var(--chart-2))"] {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Tighten FAQ spacing */
.space-y-4 > * + * {
  margin-top: 12px !important;
}

/* Tighten footer */
footer.py-12 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

footer .mb-12 {
  margin-bottom: 32px !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

button:focus,
a:focus {
  outline: 3px solid #C15F3C !important;
  outline-offset: 2px !important;
}

::selection {
  background-color: rgba(193, 95, 60, 0.25) !important;
  color: #2B2A27 !important;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 70px; /* Account for fixed navbar */
}

/* Scroll snap for sections */
main > section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Don't snap on footer */
main > footer {
  scroll-snap-align: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   SECTION TRANSITIONS - SUBTLE DIVIDERS
   ============================================ */

/* Hero to Features transition */
section#features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, #F4F3EE 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

section#features {
  position: relative;
}

/* Subtle top border on white sections */
section[style*="background-color:var(--card)"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(193, 95, 60, 0.15), transparent);
}

/* Bottom fade on colored sections */
section[style*="background: linear-gradient"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, transparent 100%);
  pointer-events: none;
}